How to pass state back to parent in React?

In React, passing data from a child component to a parent component is commonly achieved through callback functions. This is a standard approach for lifting state from the child component to the parent component. Below, I will provide a specific example to illustrate this process:

Let's assume we have a parent component and a child component. The child component contains a button, and whenever the button is clicked, we want the child component's state to be sent back to the parent component.

Step 1: Create a Callback Function in the Parent Component

First, define a callback function in the parent component to receive data from the child component.

javascript
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: null,
    };
  }

  handleChildData = (data) => {
    this.setState({ childData: data });
  };

  render() {
    return (
      <div>
        <ChildComponent onChildDataChange={this.handleChildData} />
        {this.state.childData && <p>Received from child: {this.state.childData}</p>}
      </div>
    );
  }
}

Step 2: Invoke the Callback Function in the Child Component

Next, in the child component, use the callback function onChildDataChange passed from the parent component to send data.

javascript
class ChildComponent extends React.Component {
  state = {
    data: 'Some data',
  };

  sendDataToParent = () => {
    this.props.onChildDataChange(this.state.data);
  };

  render() {
    return (
      <button onClick={this.sendDataToParent}>Send data to parent</button>
    );
  }
}

In the above code, when the button is clicked, the sendDataToParent method is triggered. This method calls the onChildDataChange function received from the parent component and passes the child component's state as an argument, effectively sending the data back to the parent component.

Conclusion

This approach enables straightforward data passing between components, particularly when transferring data from a child to a parent. It preserves component independence and reusability while efficiently managing state data.