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
import React from "react" ;
import Child from "./Child" ;
class App extends React.Component {
state = {
name: "" ,
};
handleCallback = (childData) => {
this .setState({ name: childData });
};
render() {
const { name } = this .state;
return (
<div>
<Child
parentCallback={ this .handleCallback}
/>
{name}
</div>
);
}
}
export default App;
|
Javascript
import React from "react" ;
class Child extends React.Component {
onTrigger = (event) => {
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
Share your thoughts in the comments
Please Login to comment...