How to pass data from child component to its parent in ReactJS ?
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/