Passing data between different component levels in Reactjs

Passing data between components of different levels is important and also a trickier thing to do in Reactjs. The data flow for some directions is easy to understand while others confuse developers. This post will discuss three main data flows between React components. After taking a grip on the concepts described in this post, you should be able to pass data between any component at any level without an issue.

In order to explain things in a more practical approach, I have created a sample React app by running the following command as usual.

npx create-react-app sample_app

Then I created a folder called ‘components’ under the /src and created three components called Parent, Child1, and Child2.

So the folder structure looks like;

/src
|__ /components
|   |__ Parent.js
|   |__ Child1.js
|   |__ Child2.js
|
|__ App.js 

Please be noted that the App.js is going to be work as the Root component to all and the Parent component has been called inside it.

import React, { Component } from 'react';
import './App.css';
import Parent from './components/Parent';
class App extends Component {
  render() {
    return (
      <div className="App">
          <Parent/>
      </div>
    );
  }
}
export default App;

Keeping the above setup in mind, let’s come to the major content of the post. Here we are going to discuss the following topics.

Passing data between
- Parent to Child
- Child to Parent
- Child to Child

• Parent To Child

Passing data from a Parent component to Child is the easiest way of data passing among the above three topics. We can simply use ‘props’ in ReactJs to make the child inherit properties from its parent component.

In the Parent, we can pass values to the Child1 with a callback as:
<Child1 valueFromParent={this.value}/>
and define the real value of ‘value’ inside the Parent class.

In Child1, we can simply access it using ‘this.props.valueFromParent’

Parent.js

import React, {Component} from 'react';
import Child1 from './Child1';
class Parent extends Component{
    value="Value From Parent";
    render(){
        return(
            <div>
                <Child1 valueFromParent={this.value}/>
            </div>
        );
    }
}
export default Parent;

Child1.js

import React, {Component} from 'react';
class Child1 extends Component{
    render(){
        return(
            <div>
                <h2>{this.props.valueFromParent}</h2>
            </div>
        );
    }
}
export default Child1;

• Child to Parent

Child to Parent data passing is kind of a confusing task. First, we have to create a callback function in the Parent which takes the data to send from the Child1 component.

Secondly, we have to pass this callback function to the child same as in the previous scenario.
<Child1 functionCallFromParent={this.parentFunction.bind(this)}/>

Then we can call ‘parentFunction’ from Child1 and pass some data as:
‘this.props.functionCallFromParent(<data_to_pass>)’.

Example code for the Parent and Child1 components will look like below.

Parent.js

import React, {Component} from 'react';
import Child1 from './Child1';
class Parent extends Component{
    parentFunction=(data_from_child)=>{
        console.log(data_from_child);
    }
    
    render(){
        return(
            <div>      
                <Child1 functionCallFromParent={this.parentFunction.bind(this)}/>
            </div>
        );
    }
}
export default Parent;

Child.js

import React, {Component} from 'react';
class Child1 extends Component{
    childFunction=(e)=>{
        e.preventDefault();
        this.props.functionCallFromParent("Hello From Child1");
    }
    render(){
        return(
            <div>   
                <button onClick={this.childFunction.bind(this)}>Click</button>
            </div>
        );
    }
}
export default Child1;

In the above codes, when the button of Child1 is clicked, it triggered the ‘parentFunction’ in Parent and log the passed data “Hello From Child1”.

However, the passed data only can be used within that function. In order to use it from other parts of the Parent, we can assign the value to a state.

constructor(props){
    super(props);
    this.state={
        value_key=""
    }
}
parentFunction=(data_from_child)=>{
    this.setState({value_key:data_from_child});
}

• Child to Child

Passing data between sibling components is a combination of the above two approaches. Without explaining further I will give the sample codes for Parent and Child2. Please be noted that the code for Child1 is same as in the above scenario.

Parent.js

import React, {Component} from 'react';
import Child1 from './Child1';
import Child2 from './Child2';
class Parent extends Component{
    constructor(props){
        super(props);
        this.state={
            value_key:""
        }
    }
    parentFunction=(data_from_child)=>{
        this.setState({value_key:data_from_child});
    }
    render(){
        return(
            <div>      
                <Child1 functionCallFromParent={this.parentFunction.bind(this)}/>
                <Child2 valueFromParent={this.state.value_key}/>
            </div>
        );
    }
}
export default Parent;

Child2.js

import React, {Component} from 'react';
class Child2 extends Component{
     
    render(){
        return(
            <div>
                <h2>Child 2</h2>
                <h2>{this.props.valueFromParent}</h2>
            </div>
        );
    }
}
export default Child2;

Using these different data passing methods, you will be able to pass data between different components at different levels.

Please leave a comment if you find this article useful or have any doubts regarding the content.