Passing Data Between React Components — Parent, Children, Siblings

Passing Data Between React Components — Parent, Children, Siblingssakshi chahalBlockedUnblockFollowFollowingMay 25React uses unidirectional data flow which implies that data has one, and only one, way to be transferred to other parts of the application.

Henceforth, Data handling in React could be a bit tricky, but not as complicated as it might seem.

 I have currently compiled three methods of Data Handling in React :-From Parent to Child using PropsFrom Child to Parent using CallbacksBetween Siblings : (i) Combine above two methods(ii) Using Redux (iii) Using React’s Context APIThis blog majorly contains a compilation of the implementation of these concepts, which would surely be beneficial for any beginner trying to grasp things at a glance.

From Parent to Child Using PropsLet us consider our directory structure to be such that the Parent Component renders child components in the Application.

App└── Parent ├── Child1 └── Child2This is the easiest direction of data flow in React and the most basic one.

class Parent extends React.

Component {state = { data : "Hello World" } render() { return ( <div> <Child1/> //no data to send <Child2 dataFromParent = {this.

state.

data} /> </div> ); }}//It is no compulsion to use the data to send as a state, simple vars or const variables could also be used to send data from Parent to Child.

Simply, use this.

props.

dataFromParent (just a variable used for sending props) to access the data sent from Parent to Child.

class Child2 extends React.

Component {render() { return ( <div> The data from parent is:{this.

props.

dataFromParent} </div> ); }}From Child to Parent Using CallbacksLet us suppose 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 a callback function that takes in a parameter which we consider having accessed from the child in the Parent.

jsStep 2: Also, send the defined callback function as a props to the Child1.

jsclass Parent extends React.

Component {state = { message: "" }callbackFunction = (childData) => { this.

setState({message: childData})},render() { return ( <div> <Child1 parentCallback = {this.

myCallback}/> <p> {this.

state.

message} </p> </div> );}}Step 3: In Child1.

js send the data using this.

props.

callback(dataToParent)class Child1 extends React.

Component{sendData = () => { this.

props.

parentCallback("Hey Popsie, How’s it going?"); },render() { //you can call function sendData whenever you'd like to send data from child component to Parent component.

}};Between SiblingsWhen I was a beginner, it took me a hard time deciding which method to choose to share data between siblings, there are three methods known to me yet to share data between siblings and all of them have their own perks and cons.

Method 1: Combine the above two methods of sharing data.

This method however, will not work for complicated directory structures as one will have to write large bits of code for sending data between components at far levels from each other.

The data, then will have to be pushed and pulled through each middle level.

Method 2: Use a global store maintaining the states of all child components which are needed to interact and consume the data required from the store — ReduxMethod 3: Use React’s Context API There are tons of articles and blogs already regarding why React upgraded to Context API and which one is better in what terms, these two articles would help one understand it all:React Context API – A Replacement for Redux?Convert a React App that uses Redux for State Management to use React's New Context APIblog.

bitsrc.

ioYou Might Not Need ReduxPeople often choose Redux before they need it.

“What if our app doesn’t scale without it?” Later, developers frown at…medium.

comI have used this method and already have a slight inclination towards using this one over Redux.

The major advantage of Context API is that it saves the developer from Prop-Drilling.

( Prop-drilling refers 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)Image source: GoogleConsider the directory structure and we need to pass data between Child1 and Child2.

[ Child1 has to send message — “SSup brother??” to Child2 ] We implement this in the following method using Context API:App├── Child1└── Child2Step1: 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.

const MContext = React.

createContext(); //creating context objectclass MyProvider extends Component {state = {message: ""}render() { return ( <MContext.

Provider value={ { state: this.

state, setMessage: (value) => this.

setState({ message: value })}}> {this.

props.

children} //this indicates that the global store is accessible to all the child tags with MyProvider as Parent </MContext.

Provider>) }}The provider is the boss (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 the message by Child1, it has to access Provider and set the states of the Provider.

(b) To view/access the data by Child2, it has to access Provider to get the states.

Step 3: Use MyProvider component as a Parent to the two children — Child1, Child2.

class App extends React.

Component {render() { return ( <div> <MyProvider> <div className="App"> <Child1 mcontext={MContext} /> <Child2 mcontext={MContext} /> </div> </MyProvider> </div> );}}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.

class Child1 extends React.

Component {render() { return ( <div> <this.

props.

mcontext.

Consumer> {(context) => ( <button onClick={()=>{context.

("New Arrival")}}>Send</button> )} </this.

props.

mcontext.

Consumer> </div> ) }}How does Child2 receives the data now? Simply, accessing the Provider withing Consumer tags.

class Child2 extends React.

Component {render() { return ( <div> <this.

props.

mcontext.

Consumer> {(context) => ( <p>{context.

state.

message}}</p>)} </this.

props.

mcontext.

Consumer> </div> )}}I hope this gives clear implementation details for Data Passing between various components in React.

.. More details

Leave a Reply