How can I pass a child component's state up to the parent?

Question

I am new to ReactJS. Please forgive me if it is so simple.

I am trying to inject the radio button component (RadioButton.js) into home page. So that the radio button appear on home page. It like a child. As you can see from RadioButton.js, I have two radio buttons. Their values are buttonOne and buttonTwo.

What I am trying to achieve is that when buttonOne is selected, I would like to show <TablePage/> components. otherwise, <StickyHeadTable />

RadioButton.js

export default function FormControlLabelPosition() {
  const [value, setValue] = React.useState("female");

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={value}
        onChange={handleChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

RadioButton is injected in homepage. How can i get the values from RadioButton.js. So that I can use the condition.

HomePage.js

  return (
    <div className="home-page">
      <RadioButton values={values} handleChange={handleChange}></RadioButton>
      {values.flight === "buttonOne" ? <TablePage /> : <StickyHeadTable />}
    </div>
  );

1. add a function to `HomePage.js` that changes the page 2. pass it as prop to `` 3. call it from inside the child's `handleChange` — , Nov 06 '19 at 13:17
Does this answer your question? [How to update parent's state in React?](https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react) — , Nov 06 '19 at 13:20
Possible duplicate of [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — kapil pandey, Nov 06 '19 at 13:34

score 2 · Answer 1 · answered Nov 06 '19 at 13:18

RadioButton.js

export default function FormControlLabelPosition(props) {

  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={props.value}
        onChange={props.handleChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

HomePage.js

const [value, setValue] = React.useState("female");

  const handleChange = event => {
    setValue(event.target.value);
  };
 return (
    <div className="home-page">
      <RadioButton values={values} handleChange={handleChange}></RadioButton>
      {values.flight === "buttonOne" ? <TablePage /> : <StickyHeadTable />}
    </div>
  );

Please check for duplicates before answering; this question is a clear duplicate. — , Nov 06 '19 at 13:21

Martin · Accepted Answer · 2019-11-06T14:42:54.677

If you want to use the value from the RadioButton component, you should create it as an uncontrolled form component meaning that its value would come from it's parent, in this case the HomePage component.

So the RadioButton.js would be:

export default function RadioButton({ value, onChange }) {
  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={value}
        onChange={onChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

RadioButton.propTypes = {
    value: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired
};

And the HomePage.js

    export default function HomePage() {
      const [value, setValue] = React.useState("buttonOne");

      const handleChange = event => {
        setValue(event.target.value);
      };

      return (
        <div className="home-page">
          <RadioButton value={value} onChange={handleChange}></RadioButton>
          {value === "buttonOne" ? <TablePage /> : <StickyHeadTable />}
        </div>
      );
    }

Please check for duplicates before answering; this question is a clear duplicate. — , Nov 06 '19 at 13:21
Please add the following to avoid props validation warning: `export default function RadioButton({ value, onChange }) { RadioButton.propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired };` ....} and i will accept your solution — Daniel, Nov 06 '19 at 14:34

score 0 · Answer 3 · answered Nov 06 '19 at 13:27

On the HomePage.js you can use state for showing up the table conditionally based on radio button value.

I assume RadioButton.js component is called in HomePage.js as component.

RadioButton.js

export default function FormControlLabelPosition(props) {
  const [value, setValue] = React.useState("female");

  const handleChange = event => {
    setValue(event.target.value);


>  //Send your radio button value to parent component i.e HomePage.js

    props.handleChange(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="position"
        name="position"
        value={value}
        onChange={handleChange}
        row
      >
        <FormControlLabel
          value="buttonOne"
          control={<Radio color="primary" />}
          label="F1"
        />
        <FormControlLabel
          value="buttonTwo"
          control={<Radio color="primary" />}
          label="F2"
        />
      </RadioGroup>
    </FormControl>
  );
}

HomePage.js


state = {
      radioButtonValue: '';
}

render () {
   return (
        <div className="home-page">
          <RadioButton handleChange={this.handleChange} />
          {this.state.radioButtonValue === "buttonOne" ?
                 <TablePage /> : <StickyHeadTable />}
       </div>
  );
}

handleChange = (radioButtonValue) => {
          this.setState({radioButtonValue});
}

One the above code, we are sending handleChange as a props and change the state as soon as radio-button is clicked and then rendering the table based on the state.

How can I pass a child component's state up to the parent?

3 Answers3