How to Update Parent Component State from a Child Component in React?

Passing Parent State Updates via Callback Functions in React

When working with nested React components, it may become necessary to update the state of a parent component from within a child component. Since props are immutable, directly assigning values to them is not feasible.

In such scenarios, an alternative approach involves passing a function to the child component that allows it to update the parent's state. This can be achieved as follows:

// Parent Component
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this);
  }

  handler() {
    this.setState({
      someVar: 'some value',
    });
  }

  render() {
    return <Child handler={this.handler} />;
  }
}

// Child Component
class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

Through this mechanism, the child component can invoke the function provided through props and update the parent's state.

However, it's important to note that your component structure may need to be re-evaluated. Components 5 and 3 in your example appear to have no direct relationship.

One potential solution is to introduce a higher-level component that encapsulates both components 5 and 3. This parent component can maintain the state that is relevant to both child components and pass it down through props.

The above is the detailed content of How to Update Parent Component State from a Child Component in React?. For more information, please follow other related articles on the PHP Chinese website!