How to pass data between React components

When starting out with React passing data between components might seem a bit bewildering, but there is solid logic behind the process and after a little practice you are sure to get the hang of it. Let’s examine how to pass data in React from a parent component to it’s children.

From Parent to Child

React, in many ways, is just like real life. Parents always want to pass down information to their children, no matter how crappy it may be. This is the easiest way of how information flows in React, so let’s take a look.

This is our parent component called App created with ES6 class:

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
thingsIWantFromSanta: anArrayOfPresents
};
}
render() {
return (
<div>
<h2>Things I Want Santa to Bring Me</h2>
<InputBar/>
<WishList listToSanta={this.state.thingsIWantFromSanta}/>
</div>
);
}
}

Notice how we define a <WishList /> element inside the render function. This will be our child component of App. Inside the <WishList /> element is an attribute defined as listToSanta. This attribute takes in an array of presents, named as thingsIWantFromSanta, and defined in the constructor function in the state object. Remember, you can call listToSanta whatever you like, it is your own custom HTML attribute. Awesome, right?

This custom HTML attribute gets added to a wonderful thing called “props” in React. This “props” will include every single attribute you assign to the <WishList /> element. Think of this as a notebook a parent passes down to their child that contains all the information the parent has bothered to write down. So now the child has access to the wealth of information the parent has!

Let’s now look at the child component called WishList:

class WishList extends React.Component {
  constructor(props) {
super(props);
}
  render() {
return (
<div>
{this.props.listToSanta.map((present) =>
<WishListItem presentItem={present} />
)}
</div>
);
}
}

So now in our WishList class we have to pass the props in the constructor, otherwise we won’t have access to props. Inside the render function we have a <div> element, inside of which we want to map through the array of presents. So now we utilize props. Remember, props is like an object. And how do we access properties inside an object? Dot notation of course!

Since we created a new WishList class and we passed in props from the parent we need to use “this” in front of props, otherwise we lose context. Now we are mapping each item in the listToSanta, assigning each item the name “present”. Next we create another custom attribute named presentItem that contains a present from the list of presents.

This means our child has grown up and had a baby itself, called WishListItem. Let’s take a look:

class WishListItem extends React.Component {
  constructor(props) {
super(props);
}
  render() {
return (
<div>{this.props.presentItem}</div>
);
}
}

Same story here. Pass props to constructor and use the keyword “this” not to lose context. Finally inside our render function we declare <div> element and inside of it we render each individual present from the original array of thingsIWantFromSanta. Again, we access presentItem through props inside the curly braces.

And that’s it! Props is an amazing (and convenient) method of passing data from parent to child. It may seem tricky at first, but even with a little practice this will become second nature.

I will be writing a follow-up article about how to pass data from children to parents and between siblings. So stay tuned!