React Pass Data Child to Parent Component Tutorial

React pass data child to parent component example; This tutorial covers how to pass data child component to the parent component using a simple function and useState hook in React js app.

In react, we use a component for splitting the functionalities into smaller blocks. Ideally, data is sent from the parent component to the child component; however, we will go against the flow.

This guide will explain how you can create a function and a set state in the parent component, retrieve that function in the child component and update the parent component state using the props object.

To pass data from the child component to the parent component in React, we will need a React application. Two functional components, useState hook and some data that needs to be updated through the child component.

Let us begin the process:

How to Update Parent Component Data via Child Component in React App

  • Step 1: Download React Project
  • Step 2: Create New Component
  • Step 3: Set Values in Child Component
  • Step 4: Update Data in Parent Component
  • Step 5: View App in Browser

Download React Project

We will begin the first step by installing a brand new react project:

npx create-react-app react-vlog

Get inside the project directory:

cd react-vlog

Create New Component

In order to send data from one component to another component we need to create one component, create the components/ folder then create the Child.js file.

import React from 'react'

function Child() {
  return (
    <div>Child</div>
  )
}

export default Child

Set Values in Child Component

We will first start adding the code into the child component. Head over to pages/ directory then insert the provided code within the Child.js file.

The given code example consists of a simple userProfile object; we will send this data to the parent component through props and an onClick handler that we will bind it to a simple HTML button.

import React from 'react'

const Child = (props) => {
  const userProfile = {
    name: 'Philosopher King',
    mobile: 5555599999,
  }

  const updateParent = () => {
    props.parentData(userProfile)
  }

  return (
    <div>
      <button onClick={updateParent}>Update Parent</button>
    </div>
  )
}

export default Child

Update Data in Parent Component

In the src/ folder, look for the App.js file, here import the Child component, and define the state using the useState hook.

Use the html attribute to set the on-click handler that we will receive in the child component.

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

function App() {
  const [parentState, setParentHandlre] = useState({
    name: '',
    mobile: '',
  })

  const parentHandlre = (parentState) => {
    setParentHandlre(parentState)
  }

  return (
    <div className="App">
      <Child parentData={parentHandlre} />
      <div>
        Child compoent updates the parent component:
        <strong>{parentState.name + ' : ' + parentState.mobile}</strong>
      </div>
    </div>
  )
}

export default App

View App in Browser

To start the react application you need to run the react app server:

npm start

Use the url to view the app:

http://localhost:3000

React Pass Data Child to Parent Component Tutorial

Summary

In this guide, you have discovered how to send a function from the parent component to the child component and update the parent component state using react useState hook and click handler.