Open In App

How to pass data from child component to its parent in ReactJS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In ReactJS, data flow between components is typically unidirectional, meaning data is passed from parent components to child components. However, there are scenarios where you may need to pass data from a child component back to its parent component.

Approach:

Following are the steps to pass data from the child component to the parent component:

  • In the parent component, create a callback function. This callback function will retrieve the data from the child component.
  • Pass the callback function to the child as a prop from the parent component.
  • The child component calls the parent callback function using props and passes the data to the parent component.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example : This example uses the Child component prop to pass data from child component to parent component.

Javascript




// Filename - App.js
 
import React from "react";
import Child from "./Child";
class App extends React.Component {
    state = {
        name: "",
    };
 
    // Callback function to handle data received from the
    //child component
    handleCallback = (childData) => {
        // Update the name in the component's state
        this.setState({ name: childData });
    };
 
    render() {
        const { name } = this.state;
        return (
            <div>
                <Child
                    parentCallback={this.handleCallback}
                />
                {name}
            </div>
        );
    }
}
export default App;


Javascript




// Filename - component/Child.js
 
import React from "react";
class Child extends React.Component {
    // Function triggered when the form is submitted
    onTrigger = (event) => {
        // Call the parent callback function
        this.props.parentCallback(
            event.target.myname.value
        );
        event.preventDefault();
    };
 
    render() {
        return (
            <div>
                <form onSubmit={this.onTrigger}>
                    <input
                        type="text"
                        name="myname"
                        placeholder="Enter Name"
                    />
                    <br></br>
                    <br></br>
                    <input type="submit" value="Submit" />
                    <br></br>
                    <br></br>
                </form>
            </div>
        );
    }
}
export default Child;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/



Last Updated : 23 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads