Passing Data Between a Parent and Child in React

Today I’ll be going over how data is passed between parent and child components in React. There are two directions a data can go and it’s the following:

1. From parent to child
2. From child to parent

I’ll be going over these in the following sections.

Passing Data From Parent to Child

When you need to pass data from a parent to child class component, you do this by using props.

For example, let’s say you have two class components, Parent and Child, and you want to pass a state in the parent to the child. You would do something like this:

	import React from 'react';
	class Parent extends React.Component{
	constructor(props){
	super(props);
	this.state = {
	data: 'Data from parent'
	}
	}
	render(){
	const {data} = this.state;
	return(
	<div>
	<Child dataParentToChild = {data}/>
	</div>
	)
	}
	}
	class Child extends React.Component{
	constructor(props){
	super(props);
	this.state = {
	data: this.props.dataParentToChild
	}
	}
	render(){
	const {data} = this.state;
	return(
	<div>
	{data}
	</div>
	)
	}
	}
	export default Parent;

view raw

Parent to Child Using Class Components

As you can see, the parent component passes props to the child component and the child can then access the data from the parent via this.props.

For the same example, if you have two function components instead of class components, you don’t even need to use props. You can do something like the following:

import React from 'react';
	function Parent(){
	const data = 'Data from parent';
	return(
	<div>
	<Child dataParentToChild = {data}/>
	</div>
	)
	}
	function Child ({dataParentToChild}){
	return(
	<div>
	{dataParentToChild}
	</div>
	)
	}
	export default Parent;

Parent to Child using Function Components

Passing Data from Child to Parent

Passing the data from the child to parent component is a bit trickier. In order to do this, you need to do the following steps:

1. Create a callback function in the parent component. This callback function will get the data from the child component.
2. Pass the callback function in the parent as a prop to the child component.
3. The child component calls the parent callback function using props.

Let’s see how these steps are implemented using an example. You have two class components, Parent and Child. The Child component has a form that can be submitted in order to send its data up to the Parent component. It would look something like this:

	import React from 'react';
	class Parent extends React.Component{
	constructor(props){
	super(props);
	this.state = {
	data: null
	}
	}
	handleCallback = (childData) =>{
	this.setState({data: childData})
	}
	render(){
	const {data} = this.state;
	return(
	<div>
	<Child parentCallback = {this.handleCallback}/>
	{data}
	</div>
	)
	}
	}
	class Child extends React.Component{
	onTrigger = (event) => {
	this.props.parentCallback("Data from child");
	event.preventDefault();
	}
	render(){
	return(
	<div>
	<form onSubmit = {this.onTrigger}>
	<input type = "submit" value = "Submit"/>
	</form>
	</div>
	)
	}
	}
	export default Parent;

As you can see, when the Child component is triggered, it will call the Parent component’s callback function with data it wants to pass to the parent. The Parent’s callback function will handle the data it received from the child.

Conclusion

We’ve gone over passing data between a parent and child components in React. Just as a recap, here’s the different methods we’ve covered:

1. Passing data from parent to child class components
2. Passing data from parent to child function components
3. Passing data from child to parent