Originally published @ Linguine Blog
A common newbie question for engineers learning React is, “what’s the difference between props and state?” Or googling “React: props vs state”.
I spent hours trying to understand the difference when I first started, and I came to find out that most articles teach it the wrong the way.
Most articles begin with learning what props means first, and React state second. But I think that’s the wrong way to learn what React state and props are and how they work together.
So we’ll start by learning what React state is first.
React state is
Let’s begin by defining what is React state.
React state is an object.
React state can be private or public to it’s children components.
React state may hold information that influences the output of a React component.
React state in action
The first block of code we see is a simple cat react app. The objective to this cat app is to nail each definition listed above.
Now let’s create our React state.
That’s how easy it was!
But this empty state object is kind of useless until we start adding some data into it.
So we’re going to add a new property (not React component props) to that state object, and will add a couple of JavaScript events to handle adding a new cat name.
Okay, this got complicated real quick! But I’ll break it down for you really easily.
First, our state object has 2 new properties.
nameOfNewCat, will hold the new name for your cat as you’re typing.
cats, is another new property that will hold a list of your cats names.
In our render() method, I’ve added a input tag, and I’ve bind 2 actions to the button, and input tag.
This is important for you to note, because each action (handleChange, and handleAddCatClick) is modifying the state object.
Let’s break the handleChange action so you may understand how to modify state the right way.
Notice how we’re using this.setState(). This is the correct way of modifying any property in a React state object.
In traditional JavaScript, you would typically modify the object directly. But that’s a big no no in practice.
This is because modifying the state directly may create a situation where those modifications may get overwritten and cause inconsistency in the app.
setState, does not modify directly but creates a pending state transition.
Another important thing to note is when you’re updating your React state tree, it only modifies the first level of properties.
Huh??
Look at the example below to see what I mean.
How to update nested state objects with setState()
P.S. the example below is not part of the cat app we’re working on.
From the image above it shows an example of a state object that has properties such as name, age, and likes for dogs and cats.
If you run setState to change the value of name, than React will keep the other values that are defined and only change the name property.
You might think that only modifying a specific property will change and will keep the rest of the values as is. But you’re wrong if you think that.
As shown above, if we update the likes for cats to false. You’ll see that the state object has removed our like for dogs. And we all love dogs!
To keep our like for dogs, we must tell setState that we want to keep our previous nested values.
In ES6, we can do something called the spread operator. And as you see in the final results we keep our love for dogs and change our love for cats.
React state influencing the output
We’ve discussed about what React state is and how to add, and update React state data.
Your next question might be, “how do we display the data we’ve saved in state?”
This is done really easily.
In our cat app, we just need to grab the cats property from your React state object and render some markup for each cat.
In the image above you will be looping through each cat using the .map() array method to create a new li tag that outputs the name of the cat we’ve entered.
The output should look something like this.
So far we’ve built a React cat application that utilizes state to save, and display data.
Now we must understand how React props plays nicely with state.
The definition of React props
Let’s begin by defining what a React prop is.
React props are inputs that describe what we should see.
Above is an example of a plain a text field, and I have inserted an input of type to equal text.
And if I add another input named placeholder, it will make my input field look different to the user.
inputs equal props.
It works the same way with React components. Let’s take a look.
Passing state data as props
In the same file, you can create a new React component called Cat. Cat will expect a prop called name.
You will now update the code in the CatApp component where you’re displaying the list of cat names.
All you’re doing here is passing the cat name that we’ve stored in our state object, and passing it as a prop to the Cat component you’ve created.
The Cat component will then display the input name, and display the name in a list item HTML tag.
Conclusion
Understanding React state and props can seem challenging and some what confusing.
But learning it the right order may help you understand it quicker and better.
State is an object that contains private or public local data about a component. And it may be used to influence the output of a component.
Props are nothing more than input definitions to describe what you are suppose to see.
Top comments (0)