score:1

Accepted answer

You can always communicate between child and parent components easily in React. To keep the state consistent, you can follow the steps to achieve clicking the button from the child component and update the state / data in parent to render it:

  1. Create a state variable to hold the state of parent in the parent component. For example, id or data
  2. Create a function to update the parent state and pass it down to the child components
  3. Call the function above to update the parent state variable you created in step 1

So the example code should look like this: In the parent component:

  constructor(props, context) {
    super(props, context);
    this.submit = this.submit.bind(this);
    this.state.data = null;
    this.setParentState = this.setParentState.bind(this);
  }

  setParentState(obj) {
    Object.keys(obj).forEach((key) => {
      this.setState({
        [key]: obj[key]
      });
    });
  }

  render() {
    return (
      <div>
        <DoughPieChart setParentState={this.setParentState} />
      </div>
    )
  }

And in your child component you can call

  this.props.setParentState({
     data: THE_DATA_YOU_WANT_TO_UPDATE
  })

to update the parent state and display it in your parent component.

Hope it makes sense to you.


Related Query