ReactJS: Handling Data Flows Between React Components

When developing a React app, the separation into react components allows to manage the code easily. However, it poses an additional problem of passing data between react components.  Since React only supports one-way data binding, it might be confusing for a beginner.

There are three ways in which data flows can occur within react components: Parent to Child, Child to Parent, Sibling to Sibling.  For the rest of the post, I will use the following structure for explanation purposes.

└── ParentComponent
 ├── AnotherChildComponent
 └── ChildComponent

Parent to Child

This is the easiest out of the three methods. Let’s assume that we need to pass the isClicked status of the parent component to a child. The parent component would be similar to the following code snippet.  In the child component declaration, you will need to specify the variable name isClickedFromParent that will be used in the child component. In this scenario, I have passed the isClicked status of the parent to the child component.

import React from 'react';

class ParentComponent extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
           isClicked: true
        }
     }

      handleClick = () => {
         this.setState({
           isClicked: true
         });
     }

     render() {
        return({<button onclick='handleClick()'>Click</button>
                <ChildComponent isClickedFromParent={this.state.isClicked} />
                });
     }
}

The child component would be similar to the following code snippet.  You should assign the value from the parent  i.e. this.props.isClickedFromParent to the state. However, in order to use the value within the component, you should use this.props.isClickedInChild .  A common mistake is to use this.state.isClickedInChild  instead of this.props.isClickedFromParent.

import React from 'react';

class ChildComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
             isClickedInChild: this.props.isClickedFromParent
          }
      }

      render(){
           return(<div>{this.props.isClickedInChild}</div>);
      }
}

Child to Parent 

This can be a tad bit challenging since you need to implement a callback function. Once you’ve grasped the concept, it’s a piece of cake.

We need to define a callback function in the parent to handle the data from the child. The parent component would be similar to the following.

import React from 'react'; 

class ParentComponent extends React.Component {
       constructor(props) {
           super(props);
           this.state = {
               isClicked: true
           }
       } 

       callbackHandlerFunction = (clickStatus) => {
           this.setState({
                isClicked: clickStatus
           });
       }

       render() {
           return({<ChildComponent handleClickInParent={this.callbackHandlerFunction} /> });
       }
}

The callback function should be called in the child component as this.props.handleClickInParent as required.

import React from 'react'; 

class ChildComponent extends React.Component {
        constructor(props) {
             super(props);
             this.state = {
                   isClicked: false
             }
        } 

        handleClick = () => {
             this.setState({
                  isClicked: true
             });
             this.props.handleClickInParent(true);
        }

        render(){
             return(<button onclick='handleClick()'>Click</button>);
        }
}

Sibling to Sibling

First transfer data from the child to the parent. Then transfer it from the parent to the child. In the given example the flow would be as follows.

 ChildComponent => ParentComponent => AnotherChildComponent

If you want to learn more about ReactJS just search in this blog. 😉

Cheers!