React: State vs. Props
State: describes a default data value in a React component that can change over time, this is usually based off a user’s actions that call for changes in the user’s interface.
Props: short for property or properties, are used to transport data from one component to another but the data only from parent to child components.
Now that we have a general idea of what state and props are, we can now take a deeper look at each of them and vital a role they play in your application.
From our definition above we can put together that state will hold different data values that can change over time. A prime example of this could be the state of a user’s cart or even more simple a user itself. The user’s interface in each case would be different weather comparing their shopping carts or user information. To put it simply, we implement state in our applications when we want or need to keep track of data between component renderings. By default, our components will not have state and in the following examples we will simply set our state to that of a user, with all the accompanying information a user would have from a database.
Now that we have set the state of our user let’s start by getting some of that user’s information onto our page. If you have a look at the example below the following explanation will breakdown how we actually call state.
In the example above I have created a little welcome for our user calling the state of our user’s username as well as their first name. But let’s take a closer look at all the elements involved in getting that state to render to the page. When dealing with state we must always start with this, this being this instance of the state in the component. We then select which object in state we would like to render, in this case the only selection available is user. From here we now have access to call upon any of the data the state of user contains. As stated before, we called upon their username and first name allowing us the option to make a customizable message that adds that personal touch to our users experience.
How would I go about changing the state of user if I am not the RealKevBot though? Not to worry, React has implemented a method to help us to do just that, and it is aptly named setState(). If you take a look at the example below, you will see how we can implement this method into other functions.
As you can see our default state of user has been hardcoded to myself. That does not make our application very dynamic in that I can be the only user, setState() allows us to set our state more dynamically such as when it is implemented into a function. In this case, once the button is clicked the state of user will change to that of Bilbo Baggins. Upon refresh the state will change back to that of the hard coded state until the button is pressed again.
What if another component needs access to the user’s state? Not to worry, we will be able to do so but first we will segue into…
Props are used to transport data from one component to another, and that data in this case will be the state of our user. It is important to note that that the data being passed only goes one way, from the parent component to the child component. Our current state of user resides in our Main component, this would be the parent component. So, let’s build out a child component called UserInfo and import it into our main component. Once imported we will return it just below our button, thus making it a child component once rendered.
To pass our current state of user as props to our user info child component, we will simply need to add the following line of code to the imported user info component on our main component. A little confusing right? Here, take a look at the small change made
As you can see, we have passed it down to our user info with the name of user, containing the state of our entire user. You also have the option to pass something more specific by adding .username as well the other end of the spectrum and send state as a whole. For these purposes we are only looking to pass our state of user to our user info page as it seems appropriate. Our last step in assuring our child component has access to props, the user info component must take it in as an argument like so.
Now that we have access to our user as props, we can use the ‘state’ of our user within this component to render something completely different with that set of data. On the user’s info page, you guessed it, we will display all pertinent information one would find on such a page. Take a look at the example below and we will discuss some of the differences on calling upon props.
Above I have created a simple read out of the current user’s information from props. We call upon props, the name we have given those props when passing them down, and then the data element we would like to extract. Similar but very different, it might be confusing because I am still pulling from user but as stated above, we are pulling from the prop user because I have named it that, not our state of user. You can name it anything you would like, but for reference purposes I believe this makes it easier.
Another difference to notice is that I do not need to call an instance of this for props and use it before props when calling upon them. That is because props do not change, in this and everyone component instance they will remain the same. This can be confusing because props can hold something, such as our state of user, which can change.
To clear the air a little, the prop of user will always contain the state of user and that is unchangeable. What can change though is the current state of user to a different user. Although the state of user has changed, our props remain the same. For example, if were to load up the current react app it will look as such.
Upon pressing the button, the current state of user will change to Bilbo Baggins. You will notice that both components will update due to the change in state.
The main component is pulling its data directly from state, and once that changed it naturally changed as well. Our user info component updated as well, but not because our prop changed in any way, but because our prop was holding the value of a changeable object, in this case the state of user.
If you would like to view a copy of this code to play around with or just for reference, you can find the link for the GitHub Repo here.
I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles in the future!