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!
