Inverse Data Flow in React: Updating Parent from Child Components with Callback Functions
Tags: react, webdev, javascript
Published: 2022-12-19 06:18:48



In React, data typically flows down from parent to child components through props. However, there may be scenarios where we need to update the parent component when changes occur in the child component. In this tutorial, we'll explore inverse data flow in React and learn how to update the parent component by using callback functions. We'll build a simple example where a button click in the child component updates the state and changes the heading in the parent component.

---


**Setting up the Components**:
We'll create two components: `Parent` and `Child`. The `Parent` component will render the `Child` component and display a heading. The `Child` component will have a button that triggers the state update in the parent component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcsy5j2u1x21soldluuc.png)

---
**Parent.js**

```
import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
   const [header, setHeader] = useState('I am a Parent');

   return (
     <div className="parent">
        <h1>{header}</h1>
        <Child handleClick={(newHeader) => setHeader(newHeader)} />
     </div>
   );
}

export default Parent;

```

**Child.js**

```
import React from 'react';

const Child = (props) => {
    return (
      <div className="child">
        <h1>I am a Child</h1>
        <button onClick={() => props.handleClick("I am a Changed Parent")}>Click</button>
      </div>
    );
}

export default Child;

```

**Explanation**:

1. In the `Parent` component, we use the `useState` hook to create a state variable called `header` and its corresponding setter function, `setHeader`. The initial value of `header` is set to "I am a Parent".
2. The `Parent` component renders the `Child` component and passes a callback function `handleClick` as a prop.
3. In the `Child` component, we have a button with an `onClick` event that invokes the `handleClick` function passed from the parent. When the button is clicked, it triggers the callback function and passes the new `header` value as an argument.
4. Inside the callback function in the `Parent` component, we update the state by calling `setHeader` with the new `header` value.
5. The updated state causes a re-render, and the new `header` value is displayed in the parent component.

---
Inverse data flow in React allows us to update the parent component when changes occur in the child component. By passing callback functions as props from the parent to the child, we can modify the state in the parent component based on child interactions. This approach allows for better separation of concerns and modularization of components, as the child component doesn't directly modify the parent's state but instead notifies the parent to handle the state update. Understanding this concept is essential for managing data and state across different components in a React application. 


Happy Coding!

---


Resources:

[Thinking in React](https://reactjs.org/docs/thinking-in-react.html)

[React Interactivity: Events and State](React interactivity: Events and state
)

[Lifting State Up](https://reactjs.org/docs/lifting-state-up.html)