Pass Data from Child to Parent in React

In this ReactJS tutorial, you will learn how to pass data objects from the Child to Parent component using the function components.

ReactJS applications can have a number of components, and many of them may communicate to send data from one to another component.

The parent and child relation is a very common relation between various components. Data can move from parent to child or the child back to the parent. We have already discussed how to pass data from the Parent component to the Child component.

In this tutorial, you will learn how to pass data from Child to Parent using the functional component approach using event handlers.

How to Pass Data Object from Child to Parent in React Application

Step 1 – Create React App

Step 2 – Make Child Component

Step 3 – Send Data from Child to Parent Component

Step 4 – Get Data in Parent Component

Step 5 – See In Action

 

Step 1 – Create React App

Before creating the React app, you need to install the create-react-app to create new React application.

npm install create-react-app --global

 

Now create a new React application by executing the npx command and providing the app name:

npx create-react-app react-app

 

Open the application directory then you can open it in VS code:

cd react-app

code .

 

Step 2 – Make Child Component and Send Data to Parent

Head towards the src folder at the root and create a components folder with a file named child.js. Next, update the file with the following content:

import React from 'react'
const Child = (props) => {
  const sample = {
    name: 'Freaky Jolly',
    email: '[email protected]',
  }
  const onClick = () => {
    props.passData(sample)
  }
  return (
    <div>
      <button onClick={onClick}>Pass Data to Parent</button>
    </div>
  )
}
export default Child

The sample object contains information, which is getting sent back to the Parent via props event handler on the trigger of click. In the parent component, you will get to know how we are passing the onClick event handler as prop to the Child.

 

Step 4 – Get Data in Parent Component

The App.js file contains the Parent functional component. Here we will import the Child component and embed it inside the template.

Here you will notice that we are passing the passData event handler to the Child so that it can send back the data Object via the same props click handler.

import React, { useState } from 'react'
import Child from './components/Child'
function App() {
  const [data, setData] = useState({
    name: '?',
    email: '?',
  })
  const passData = (data) => {
    setData(data)
  }
  return (
    <div className="App">
      <h2>React - Pass Data from Child to Parent</h2>
      
      <Child passData={passData} />
      <div>
        Data send by child component:
        <strong>{data.name + ' : ' + data.email}</strong>
      </div>
    </div>
  )
}
export default App

 

Step 5 – See In Action

Now, you can run the ReactJS application in the development server by executing the below command:

npm start

It will open the web server at the following location:

http://localhost:3000

 

Conclusion

We discussed how to pass data from the Child component back to the Parent component by sending the event handlers as props. At the same time, we triggered the click event from child to parent that we used to set data.

A similar kind of mechanism can be used to communicate between various kinds of interrelated functional components with ease.