Passing Data Between React Components – Parent, Child, Silblings

Tram Ho

React is a JavaScript library created by Facebook. Data processing in React can be a bit complicated, but not as complex as it looks. I currently have compiled three methods of Data Processing in React:

  1. From Parent to Child using Props
  2. From Child to Parent using Callbacks
  3. Between Siblings: i. Combine above two methods ii. Using Redux iii. Using React’s Context API This blog mainly contains a summary of the implementation of these concepts, which will certainly be helpful for any beginner trying to catch things at a glance. ** From Parent to Child Using Props **

Consider their directory structure Parent Component renders child components in the Application.
App
└── Parent
├── Child1
└── Child2
This is the easiest direction of the data flow in React and the most basic direction.

Simply, use this.props.dataFromParent (just a variable used to send props) to access data sent from Parent to Child.

From Child to Parent Using Callbacks
Let’s assume that I need to send a message from Child1 to Parent – “Hey Popsie, How’s it going?”. To do that, I need to follow a series of steps.
Step 1 : Define the callback function with the parameters we consider to be accessed from child in the Parent.js
Step 2 : Also, send the defined callback function as props to the Child1.js

Step 3 : In Child1.js send data with this.props.callback (dataToParent)

Between Siblings
When I first started, I had a hard time deciding which method to share data between siblings, there were three methods that I didn’t know about to share data between siblings and all had special features. own rights and cons.
Method 1 : Combine the above two data sharing methods.
However, this method will not work for complex directory structures because one would have to write large chunks of code to send data between components at a far apart level. The data will then have to be pushed and pulled through each intermediate level.
Method 2 : Use a global catalog to maintain the state of all the necessary components to interact and consume the necessary data from the store – Redux

Method 3 : Use React’s Context API
There are many articles and blogs that mention why React upgraded to the contextual API and which one is better, these two articles will help people understand all:
React Context API – A Replacement for Redux?
You Might Not Need Redux
I have used this method and have been a little inclined to use this method compared to Redux.

The major advantage of Context API is that it saves the developer from Prop-Drilling. (Prop-drilling
Concluded to the technique of passing down variables to sub components. The main idea is functional programming where you pass the parameters to the next function and so on)

Let’s look at the directory structure and we need to transfer data between Child1 and Child2. [Child1 must send a message – SSup brother ?? Leaning to Child2] We do this using the following method using the Context API:
App
├── Child1
└── Child2
Step1 : Create a Provider Component for the two children.
This Provider mantains the state (data to be used by both components and some callback used to manipulate the states) and returns a contextObject.Provider JSX component)
Step 2 : Pass the state and the callback function as props to all children inside the Provider Component.

The provider is the boss for its children (the global store of all the states and callback functions to manipulate those states). Who-ever needs anything has to contact the provider first to access the objects.

(a) To set or manipulate a message using Child1, it must access the Provider and set its status.
(b) To view / access data with Child2, it must access Provider to obtain status.

Step 4 : Implement the desired result in the same manner, but this time, using ContextObject.Consumer as explained below:
Both the children – Child1 and Child2 are the consumers of the Provider. Henceforth, they access the Provider within Consumer Tags.

How does Child2 get data now? Simply, evaluate the Provider withing Consumer tags.

I hope this provides clear implementation details for Data Transfer between different components in React. Offer:
Using Context in React

Share the news now

Source : Viblo