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. In this article, we will explore how to achieve this in ReactJS.
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 props from the parent component.
- The child component calls the parent callback function using props and passes the data to the parent component.
Creating 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: It will look like the following. 
Filepath- src/App.js:
Javascript
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 |
Filepath- src/component/Child.js
Javascript
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 |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
