React Send Data from Child to Parent Component Tutorial

Last updated on: by Digamber

In this tutorial, we will help you learn how to send data from the child component to the parent component in React js application through the functional component approach.

React is a quite popular JavaScript front-end framework. Building user-friendly applications in React is relatively easy at the same time, easy to maintain.

Functionalities are built using the components paradigm in React; it is pretty apparent that seldom data is passed from one component to another component.

There are two types of components in React, parent components and child components.

It is easy to pass data from a parent component to a child component, but it is quite cumbersome to pass data from a child component to a parent component.

However, we can pass functions from parent to child component that function returns some value; we can directly use that value to update the data into the parent component.

How to Send Info from Child to Parent Component in React App

  • Step 1: Install React App
  • Step 2: Make Component File
  • Step 3: Pass Data from Child to Parent Component
  • Step 4: Update Code in Parent Component
  • Step 5: Start Development Server

Install React App

In the first step we will be installing the create-react-app tool; jump on to the subsequent step if already installed:

npm install create-react-app --global

To install a new react application, we will be running the given command from the terminal:

npx create-react-app react-demo

Move into the application folder:

cd react-demo

Make Component File

Move to the the src/ folder, create a folder named components/, next make the the Child.js file:

import React from 'react'
function Child() {
  return (
    <div>Child</div>
  )
}
export default Child

Pass Data from Child to Parent Component

Open the components/ folder and place the following code into the Child.js file.

The user object holds the name and email values and sets the onClick event handler by using the props object to access the sendData click event.

Use this event handler to update the values into the parent component.

import React from 'react'
const Child = (props) => {
  const user = {
    name: 'Lisa Parker',
    email: 'lisa@gmail.com',
  }
  const onClick = () => {
    props.sendData(user)
  }
  return (
    <div>
      <button onClick={onClick}>Click Here</button>
    </div>
  )
}
export default Child

Update Code in Parent Component

Head over to App.js file, we are using this file as a parent component.

Import the child component, and use the HTML attribute for setting the sendData click handler as a prop. We can set the state in the sendData function and update the parent component state.

import React, { useState } from 'react'
import Child from './components/Child'
function App() {
  const [data, setData] = useState({
    name: '?',
    email: '?',
  })
  const sendData = (data) => {
    setData(data)
  }
  return (
    <div className="App">
      <h2>React Pass Data Child to Parent Component Examle</h2>
      
      <Child sendData={sendData} />
      <div>
        The user data sent from Child compoent:
        <strong>{data.name + ' : ' + data.email}</strong>
      </div>
    </div>
  )
}
export default App

Run App on Browser

We now need to start the application’s development server, make sure to run the given command:

npm start

You may now open the given url on the browser and test the react redirect feature:

http://localhost:3000

React Send Data from Child to Parent Component Tutorial

Conclusion

In this tutorial, we have step-by-step learned how to pass values from a child component to the parent by passing a function from the parent component to the child component as a prop.

We have also discovered how to trigger the passed function using arguments and set the data we needed to pass to the parent.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.