Passing data from Parent to Child Components and Vice Versa with React

This article will explain how to pass data from parent components to child components and (vice versa) from child components to parent components using state and props.

The code:

The code deployed via Github Pages:

First, let’s talk about state. State is a plain JavaScript object used to hold data/information/values. It is mutable, which means its values can be changed. State holds information about/of the component.

Props is also a plain JavaScript object. Props is immutable, which means its values can NOT be changed. Props are passed from parent component to child components.

Now let’s see how we can use state and props to pass data back and forth. Let us first look at code for the Parent Component and how to pass data from the parent component to the child components.

For this application, the Parent component will be keeping track of the data/information of the entire application. If we need to change the data at any point, we will be mutating the Parent component’s state. First, we need to initialize state in the Parent component. This is done by declaring “this.state=” in the constructor function:

We will need to pass the state values to the child components (Child1 and Child2). You do this via the render function and “value” props. “this.state.child*” will be accessed as “this.props.value” in the child component.

“this.props.value” is used in the render function of the Child1 component and has the same value as “this.state.child1" of the Parent component.

There you go, we have successfully passed information from the parent component to the child component. Remember, the random number is generated in the parent component’s state. Then it is passed to the children as a props. Finally, the child component renders the value.

Passing data from the child components to the parent components is more complicated, but also requires props. Remember, props can only pass data from parent to child. This time, instead of passing a variable, we will be passing a function or callback to the child components. Here is the updated code:

The child components can now have a reference to and invoke/call the this.mutateChild* functions declared in the parent component. Here is the code:

When the child is clicked, the onClick event handler will trigger the this.handleClick function. The handleClick function generates a random string. It then passes the random string as an argument to this.props.mutateState(randomString). Remember, this.props.mutateState is a reference to this.mutateChild* of the parent component. Let’s examine this more closely with code:

Thus, when we invoke this.props.mutateState(randomString(5)), we are invoking this.mutateChild1(randomString(5)).

And there you go, we have passed information from the child components back up the react tree.

Follow me on Facebook and Github:

If you would like to learn more about state and props:

Related posts:

I have been warned that it is career limiting to have a public voice: “The internet will be there forever”; “You cannot predict how different people may interpret or misuse your words”; “In ten years…

Humans have been fascinated with photography since it’s inception. We looove to take pictures of everything: ourselves, our surroundings, pets, loved ones, food, ourselves again. They’re also a…

I am a 20 year-old college student, currently unemployed, and I have never before had a credit-card. well I applied for one today, and was denied. how can I get credit with no credit history and no…