Forward Advance Learning

Passing Data into Vanilla React Components with Props

A React app is made out of a tree of components. Our components need to receive information to change the way they look and behave. We want to be able to pass data in. This is done using props (properties).

For example:

Here's a UserProfile component, created as a stateless component:

See the Pen React Vanilla Props Demo by Nicholas Johnson (@superluminary) on CodePen.

Give Chopper a cat and pass that in too as another prop.

We can do the same thing with a class based stateful component. The main difference is that we don't explicitly recieve props, they become an attribute of the component object.

Here's the exact same thing, done with a class:

See the Pen React Vanilla Props Stateful Demo by Nicholas Johnson (@superluminary) on CodePen.

Walter needs a pet gerbil with a name and description. Make one and pass it in, then render it.

Props are like DOM properties

The sharp eyed amongst you may have noticed that the way we pass props into a component in the same as the way we set attributes on a DOM node:

React.createElement('a', {href:'#'});
React.createElement(Cat, {name:'Geoffrey'});

This is because, to React, Components work like new DOM nodes that we define. They sit inside the Shadow DOM tree, and do whatever they do.

When we define a UserProfile component, we treat it exactly the same as we would treat a regular HTML div, span, table or anchor.

Props are Immutable

Think about an HTML element <img src="cat.gif" />

The image tag recieves a src property which tells it how to behave (download the image and render the pixels on the page). The Image element recieves the src property from outside. It is passed in. The image tag is not able to change its own src property.

This is also true for Components. They should never change their own props. Props come from outside, and the element responds to them.

If we need to pass data back up the tree, we can do so with events, or by writing to a Flux store. More on this later.

One way binding

Passing data down via props gives us the concept of one-way-binding.

Props in a react app go one way only, from parent components to child components. Data flows down through the app from parent to child. This means that once we are done rendering a parent node, we can forget about it and render its children.

If children were allowed to modify their parent's data, then we might have to loop back over and over during our render each time a child changed a parent's data. This is actuaully how Angular 1 worked, and was part of the reason why it was slow.

Props in Action

Say we have a user with a list of friends. We might iterate over that list, passing friends down into Friend components. We pick up the values in the child components, and render them.

Here's a set of components that handle a user profile. Notice how the data flows down through the app via props:

See the Pen React Vanilla Props One-Way-Binding Demo by Nicholas Johnson (@superluminary) on CodePen.

Give the user a newsfeed. Create a newsfeed component, and pass the feed into it via props.