Props In React

Aside from state, the other major way of working with data in React is called Props (short for properties). Props are a way of passing data between components so that when you generate data in one component you can use or render that data in a child component. So let’s get into it, how does it all work?

Props are most similar to function parameters, they are arguments passed into a React component that will produce a result based on what’s done with them. They are different than state, where state is local to a component and owned by that component, props are not owned by the component they are passed to.

What Can A Prop Be?

Pretty much anything. You can pass simple data formats like strings, numbers, or boolean values. But you can also pass variables or even functions as props, if you’re passing a function as props just make sure to pay attention to where it is bound!

So let’s get on with it, how do we start using them?

The Standard Way

Passing props the standard way is pretty simple, in a react component you can add props directly in line. You even get to pick the name. You can also add them directly into a JSX element if you want to display certain content, or even dynamic content.

<Title titleText={“Untitled"} />

Passing Boolean Values As Props

Boolean values can also be passed in as props.

<OnSwitch IsOn={true} />

But you can also pass in a value that is truthy or falsy to get the same result. Passing in any value or variable that exists with a truthy value will produce that result. We can also use the not operator (!) to get the opposite of what we pass in, typically this is passed in to get the opposite of something or check if something exists.

const turnedOn = “Yep it’s on"

<OnSwitch isOn={turnedOn} isOff={!turnedOn} />

//isOn = truthy
//isOff = falsy

Passing To Multiple Components

Now it’s a given that you can pass props to children, but you can also pass them to multiple children, even as they’re generated!

<ul> 
    {this.state.items.map((eachItem) => {return <ListItem item={eachItem} />})}
</ul>

In the example above we will render as many ListItem components as there are items in the this.state.items array (you can tell it’s an array because map is a vanilla JS array function, no React magic here). This comes in really handy whenever you want to create something like a list or a display of any kind that depends on receiving data.

Spread Operator and Props

Ok ok I know you’re tired of props. But let’s go into one more way to pass them to a component.

Using the spread operator (again, just a JavaScript feature) we can pass all the available props into a child component.

const animalSounds = {dog: woof, cat: meow, seaLion: arf}

<Cards props={…animalSounds} />

//e.g. access as this.props.dog
//returns woof

Spreading an an iterable JavaScript object or array as props breaks it down into its individual pieces and allows you to access them much more easily. In this case you would be able to use each of the animal sounds just by typing this.props.dog to get woof.

Those are the basic ways to pass props in React. But what if you want to pass props somewhere else, or just don’t want to pass them through several levels of child components (this is known as prop drilling)? Well there are several well known state management libraries out there that handle this exact problem. Don’t worry we’ll get into those soon!