Inverse Data Flow in React: Updating Parent from Child Components with Callback Functions

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.

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

React Interactivity: Events and State

Lifting State Up