How to Pass Data from One Component to Other Component in React?
Propsare used for passing data between the components. We usually use it to pass data from the Parent component to the child component. You should check out -What if we need to pass data from Parent to Child Component???
What if we need to pass data from Child to Parent Component???
If you are not using any state management library like Redux or React ContextAPI and you need to pass the data from child component to parent component.
UseCase -
When clicking on any user rows, Implement functionality to get that user row data from the state data and display on page.
Solution- Use Props as callback functions.
Let’s see an Example,
I have created two components one is – Parent Component as DisplyList.js and other one is – Child Component as UserListItem.js.
Parent Component - DisplyList.js
import React from 'react'
import ListItem from '../src/listItem'
export class DisplyList extends React.Component {
// Set dummy data
state = {
]
}
//This is the row data from ChildComponent
getUserData = (userRowData) => {
console.log(userRowData);
}
render() {
return (
div>
{
this.state.data.map((user, i) => (
ListItem userRowData={user} handleClick={this.getUserData} key={i} />
))
}
div>
);
}
}
export default DisplyList;
Child Component - UserListItem.js
import React from 'react';
const UserListItem = (props) => {
return (
// Using Props handleClick as callback function
div onClick={() => props.handleClick(props.userRowData)}>
div> ({props.userRowData.id}) : Name : {props.userRowData.name}, Email : {props.userRowData.email}div>
div>
);
}
export default UserListItem;
The above example code show how you can pass data from the Child to Parent component.
If you find any error, please feel free to correct it by commenting on it. I’m still learning and documenting what I learn.
