Pass Data from Child Component to Parent in ReactJS

Passing data from one component to another is an essential part of building complex React applications. React props and states are fundamental concepts in React. Props stand for properties, which are used for passing data from one component to another, while State is used to manage data within a component.

Prerequisites

• ReactJS Props
• ReactJS State

Passing Data from Child Component to Parent

You can easily pass data from a parent component to a child component with the help of props. Passing data from a child component to a parent component is different. To do this, you must use props and state, particularly useState.

• First, we create a state (using useState) in the parent component to store data. Since it is possible to pass data from a parent to a child component, we will pass a function that will manage the parent component's state.
• Now, the child component will have access to handle the state of the parent component, which will be easily accessible to it.

By following this approach, we can easily pass data from the child to the parent component.

Example

Parent component uses the useState hook to create a state variable named data and a function named setData to update this state. The handleData function is used to update the state with the help of a parameter. This handleData function will be passed as a prop to the child component to change the state of the parent component. Here is an example of the parent component.

File - Parent.jsx

// Parent.jsx

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

const Parent = () => {

    const [data, setData] = useState('');
    const handleData = (data) => {
        setData(data);
    }

  return (
    <div>
        <h2>Data from Child : {data}</h2>
        <Child sendData={handleData} />
    </div>
  )
}

export default Parent;

Child component defines its state variable data and a function handleInputChange, which sets the data when the input field changes. This component is included in the Parent component. When the button is clicked, the sendData function runs, passing the input data to the parent component and updating its state. Here is an example of the Child component.

File - Child.jsx

// Child.jsx

import React, { useState } from 'react';

const Child = ({ sendData }) => {
  const [data, setData] = useState('');

  const handleInputChange = (e) => {
    setData(e.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={data} 
        onChange={handleInputChange} 
        placeholder="Enter some data" 
      />
      <button onClick={() => sendData(data)}>Send Data to Parent</button>
    </div>
  );
};

export default Child;

Output

The passing of data from the child component to the parent component can be achieved by defining a callback function in the parent component and passing it as a prop to the child component. The child component will invoke this callback function to pass the data to a parent component.