Pass Data From Child To Parent Component in React

Today in this tutorial, we are going to learn how to pass data from a child component to a parent component. We have also created a tutorial on how to pass data from parent to child component in React JS do checkout here.

In your projects, you might get a scenario where you want to send the data from child to parent component. In that case, we can send the data to the parent component using callback functions.

How to Pass Data From Child To Parent Component in React JS

First, let’s create a react project using create-react-app.

npx create-react-app pass-data-child-to-parent

Let’s consider our App.js as the parent component and we will create a child component ChildComponent.js. 

App.js

import "./App.css";
import { useState } from "react";
import ChildComponent from "./ChildComponent";

function App() {
  const [userMessage, setUserMessage] = useState("");

  const handleInput = (value)=>{
    setUserMessage(value)
  }
  
  return (
    <div className="App-container">
      <div className="card">
        <div className="card-header">
          <h4 className="title">Parent Component</h4>
        </div>

        <div className="card-body">
          <p className="label">Your Message</p>
          <p className="text">{userMessage}</p>
        </div>
      </div>

      <ChildComponent valueChangeCallback={handleInput} />
    </div>
  );
}

export default App;

In App.js, we are just displaying a simple message which user has entered. To get the data from the child component we have the handleInput function. 

The handleInput function will store the value received from the child component to the state variable and the same is displayed in the parent component.

we are also importing ChildComponent in App.js and passing the handleInput function to it.

ChildComponent.js

import React, { useState } from "react";

function ChildComponent(props) {
  const [message, setMessage] = useState("");

  return (
    <div className="card">
      <div className="card-header">
        <h4 className="title">Child Component</h4>
      </div>

      <div className="card-body">
        <p className="label">Message</p>
        <input
          type="text"
          value={message}
          onChange={({ target }) => {
            setMessage(target.value);
          }}
          placeholder="Enter Message"
        />

        <button
          onClick={() => {
            props.valueChangeCallback(message);
          }}
          className='btn'
        >
          Submit
        </button>
      </div>
    </div>
  );
}

export default ChildComponent;

Inside ChildComponent.js, we have an input element and a submit button. To manage the input value we are using the useState hook. 

To pass the input value to the parent we are calling the callback function which we passed from the parent using props.

Output: