Master the art of React state and props in 5 minutes
Tags: javascript, react, beginners
Published: 2019-03-07 04:19:59

---
title: Master the art of React state and props in 5 minutes
published: true
description: 
tags: javascript, reactjs, beginners
canonical_url: https://linguinecode.com/post/master-react-state-and-props
cover_image: http://live-linguine-code.pantheonsite.io/wp-content/uploads/2019/03/react-state-vs-props.jpg
---

*Originally published @ [Linguine Blog](https://linguinecode.com/post/master-react-state-and-props)*

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

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-comp.png)</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-state.png)</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-add-form-1.png)</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-input-change.png)</figure>

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._

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-setState-nested-objects.png)</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-display-cat-names.png)

<figcaption>  
</figcaption>

</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-cat-name-output.jpg)</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-input-field.png)</figure>

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.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-input-field-placeholder.png)</figure>

_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_.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-cat-component.png)</figure>

You will now update the code in the CatApp component where you’re displaying the list of cat names.

<figure class="wp-block-image">![](https://s3.amazonaws.com/linguine-code-cdn/media/cat-app-using-cat-comp.png)</figure>

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.