Easy to follow explanation of State & Props for React Native beginners
Tags: reactnative, react, javascript
Published: 2021-07-04 16:56:06

##The Big Picture
When I first started learning React Native, it took me a little while to really grasp the flow of data through the use of “state” and “props”. I wanted to make it easier for other developers who might be facing the same challenge.

To follow along, you don’t need to know more than the basics of JavaScript, JSX and React Native.

###Let’s start with State
In a nutshell, state represents data created and managed only by a **Stateful** (Class) component. **Stateless** (Function) components do not intrinsically have state.

The way I remember state is by visualizing a state prison. The state variables are the inmates, with tattooed faces, massive upper-bodies and tiny legs. The Component is the warden, the person in charge (theoretically).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adlfc9b9wb3w6vjkabc0.png)

State variables are accessed by using `this.state` as shown below.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jox5qklqcvesobcjwnhr.png)

In the example above, the state is an object that is initialized with two key-value pairs which serve as our state variables.

In the body of the render function, we accessed the value of the first state variable (`prisonerOne`) by appending its name to `this.state`.

What will be displayed once the app is rendered is:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scc28i76tfsdzv187hi3.png)

It’s best practice to change the value of a state variable by using the `this.setState()` method. 

The `args` in `this.setState(args)` is a represents the new value for some, or all, of the state variables. Here is an example of how `this.setState()` can be used:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w407dfowuolfd4os0z61.png)

In the initial rendering of this example, the value of `prisonerOne` is “Piper Chapman” and the message displayed is the same as before.

However, if the user presses the button, the `this.setState()` function is called and it changes the value of `prisonerOne` to “Sam Healy”.

As a result, the component is re-rendered and the message is changed to:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9mvlprsokyvwtupo25x.png)

This ability to change the value of the state variable *within* the component is why state variables are said to be **mutable**. 

###Now let’s talk about Props
“Props” is short for properties.

These are used to pass data *into* a component. The values of props cannot be changed *within* a component. This is why they are called **immutable**.

Let me illustrate the use of props with an example.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6wxu3pxfhlrxpbvleci.png)

In this example, the component that the props are being passed into is called `ReceiverComponent`. The `name` and `location` are the props in this instance, but it can vary depending on the Component.

The recipient can thereafter access this data by using `this.props` in a way that resembles the use of `this.state`.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo4y4o05h9qu2qqlrwwj.png)

In this example, the value of the `name` and `location` props were accessed by appending `name` and `location` respectively to `this.props`. What will be displayed is:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uvge9p8m91al6q107j8.png)

Props, unlike state, can also be used by Stateless components.

One way this can be achieved is by passing `props` as an argument in the function declaration, and using `props` instead of `this.props` in the body of the Stateless component.

An example of this is shown below:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yy04666lslrdzbxhvcn.png)

A second way to use the props in a Stateless component is to destructure `props` in the function declaration and refer to each prop directly in the body of the component.

Here’s an example of this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jukabfvv8am7iaana3gc.png)

For further information on state and props in React Native, you can check out the links in the sources below.

If you found this helpful, then follow me on [Twitter](https://twitter.com/HMCodes) and share this with someone who may also benefit.

If this was confusing to you, please let me know why.

In any case, thanks for reading.

If you liked this article, then please [support me] (https://www.buymeacoffee.com/hmcodes)

##Sources

[Intro React State - Docs](https://reactnative.dev/docs/intro-react#state)

“React Native In Action” by Nader Dabit