Introduction
A question I found myself googling often when I started learning how to use React, was how do I pass information from a child component to its parent component? To be able to do so, you have to first understand how to pass data from the parent component to the child. I will demonstrate how to accomplish both of these tasks with a quick tutorial.
Passing data down from parent component to child component
Data is passed down in the form of props (properties). I often found myself having to pass the data my state was saving in the parent component to the child component. Let's use a simple function component with state as an example:
import React from 'react';
import Child from './Child.js';
function Parent() {
const [name, setName] = useState('')
function greeting(){
setName('Michael')
}
return (
<>
<Child parentData = {name}/>
<Button onClick={() => greeting()}>Click Here</Button>
</>
);
}
export default Parent;
Child
must be imported into the Parent
component in order for it to be rendered.
All that is happening here is greeting()
is being called upon the onClick
action on our button element. The greeting()
function calls setName('Michael')
, storing string Michael
in state.
We then can pass that string as props down to the Child
component being rendered by the Parent
. You can name your props whatever you want. Here, I named them parentData
and assigned them the data held in state, with name
.
<Child parentData = {name}/>
The Child
component now has access to the props stored in state in the parent component. Let's see how that might look in the Child
component:
import React from 'react';
function Child({parentData}) {
return (
<>
{parentData}
</>
);
}
export default Child;
Here, the props named parentData
from the Parent
component are being received by the functional component, Child
. It can do whatever it wants with that data, in this case render the string 'Michael' on the screen when the button is clicked.
Now that we know how to pass data from a parent component to a child component, we can see how to pass data in the opposite direction, from child component to parent component.
Passing data up from child component to parent component
Passing data in the other direction is a little more complicated. A common situation where you will have to do this, is when you are wanting to change the data stored in state in a parent component from its child component. In order to accomplish this, you have to pass a callback function down to the child component in the form of props.
We'll use a similar example as above for demonstration:
import React from 'react';
import Child from './Child.js'
function Parent() {
const [name, setName] = useState('')
function callBack(childName){
setName(childName)
}
return (
<>
<Child callBack = {callBack} />
{name}
</>
);
}
export default Parent;
Notice how the function callBack
is passed to Child
as props with
<Child callBack = {callBack} />
The childName
parameter received by callBack
is actually being passed up from the Child
component, let's take a look:
import React from 'react';
function Child({callBack}) {
const childName = 'Dave'
return (
<div>
<button onClick={() => callBack(childName)}>Click Child</button>
</div>
);
}
export default Child;
Child
receives the callBack
function in its parameters. It holds the childName
variable with a string of 'Dave'. Upon the click action on our button, the callBack
function is called passing into it the childName
data. This data is seen in the Parent
component, and is used to change state:
#in the Parent component
function callBack(childName){
setName(childName)
}
The new state data is then rendered by the Parent
component.
Conclusion
There you have it! That's about as simple as it gets when it comes to passing data from parent components to child components, and vice versa. Knowing how to perform these methods is an important tool to have under your belt, as they are crucial to the usage of React.
Top comments (0)