Introduction

React consists of various components and in such a situation, passing the data between components becomes essential. Let's say it is a form of communication between the components. In my previous blog (In case you haven't checked out: Learn how to use components in React within 5 minutes. (hashnode.dev)), I talked about the relationship between the components and how the parent component can pass data to the child component.

In this blog, you will learn how to pass the data from the child to the parent component. What's the difference and why do you need to know this?

Parent and Child Relationship

When I first heard about passing data from Child to Parent, I had this question in my mind: How is it different from passing data from Parent to Child? I thought we can pass the data to the Parent in the same way as we are passing it to the Child. Do I even need to learn this?
I know I was getting ahead of myself until I learned what it exactly is!

Recollect how we passed the data from the parent to the child. (In case you forgot, it was through props. Take a look at the code below.)

//Parent component
function Parent(){ //Child component receives the data 
    let greeting = "Hello";
    return(
        <h1>Parent Component</h1>
        <Child data = {greeting}/>
    )
}
export default Parent

//Child component
function Child(props){ //Child component receives the data 
    return(
        <h1> This is child component {props.data} </h1>
    )
}
export default Child

The data here i.e. props is passed as an object.
Let's try to understand it this way. You receive a letter from someone but there is no name or details of the sender in the letter. You don't know who you received it from, but the sender knows that they sent it to you. Similarly, the parent knows they sent data to the Child but the child doesn't know from whom it received the data. All it knows is that is receiving data.

Sending the data

If we consider the previous analogy and you don't know the sender, how will you send the reply to them? Similarly, how will the child pass the data to the parent when it doesn't know the parent?
You can do this by passing a function with some data and then modifying the data in the function.

// Parent component
import Child from './Child';
import {useState} from 'react';

function Parent(){
    let [dataFromChild, setDataFromChild] = useState("");
    //
    let greeting = "Hello from Parent";

    // function to receive data from the child
    let getDataFromChild = (data) => {
        setDataFromChild(data);
    }

    return(
        <div>
            <h1>Parent</h1>
            <h2>Data from Child - {dataFromChild}</h2>
            <Child greeting={greeting} getData = {getDataFromChild} />
   // We are passing the data from the parent component along with a function
        </div>
    )
}
export default Parent

Here we initialized the child data with an empty string. In case the data we want from the child string. If you are going to receive an object, initialize it with {}. Check my blog on Use State hook, in case you want to know how you can modify the object.
React State : Use State explained in 5 minutes. (hashnode.dev)

//Child Component
function Child(props){
    props.getData("Hey Parent!"); //modifying the data in the parent component
    return(
        <h1> Data from Parent - {props.greeting} </h1>
    )
}
export default Child

In case you are curious about what the final result looks like, here's the video:

You can see that as you modify the data in a child, the data being displayed in the parent is also changing.

Conclusion

In this blog post, we've discussed one of the approaches to pass data from a child component to a parent component in a Functional Component in React. By passing data through props, we can create dynamic and responsive React applications that pass data up and down the component tree.

Post your progress!

Connect with me on Twitter: Shalini Muskula (@noname469717) / Twitter
If you have been learning React or have just started your journey, do use your Twitter to post your progress and ping me there!