Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In React, "state" is the data you want to track in your app. State is what allows you to create components that are dynamic and interactive, and it's the only data that changes over time.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Our grocery list app is currently
missing important functionality.
0:05
We're unable to make any
updates to the data.
0:09
We can't change the quantity for an item
or remove an item once we purchased it.
0:13
Our UI is static because
our data is static.
0:18
There are two ways that data gets
handled in React, props and state.
0:23
So far, we've built our application
using functions that take in props and
0:29
return React elements.
0:34
However, it's important to note
that props are strictly read-only.
0:36
This means a component can only
access the props it's provided and
0:41
isn't allowed to modify them in any way.
0:46
So then, how can we make our
components dynamically change?
0:50
This is where the concept
of state comes into play.
0:54
Whenever we're dealing with data that's
expected to change, we must use state.
0:58
Let's dig into this concept.
1:04
In React, state is the data
you want to track in your app.
1:07
State is what allows you to create
components that are dynamic and
1:11
interactive.
1:15
And it's the only data
that changes over time.
1:15
To better explain, let's look at
the final demo of our grocery list app.
1:19
When the user performs any action in
the app, whether it's tweaking item
1:24
quantities or removing an item, they're
changing the state of the application.
1:29
And as you can imagine, these changes
need to be stored as data somewhere.
1:35
For example, the updated list of
items once an item gets removed,
1:40
or an item's current quantity after
it gets increased or decreased.
1:45
In React, this data is stored in state.
1:51
If we peek at the final app in React
DevTools and select the App component,
1:54
we see this new section in
the right panel labeled State.
2:00
It contains an array with three objects.
2:04
If I expand one of the objects,
we see its properties, name and ID.
2:07
This should look familiar.
2:12
The biggest difference
between the current items
2:14
array we're passing to the app
component via props and
2:18
this array in state is that
data in state is not read-only.
2:22
This data can change.
2:26
For example, if I click to remove an item,
2:28
notice how the array changes
from three to two objects.
2:31
This triggers a state change that affects
all the components that take in this data.
2:35
For instance,
the total item number changes to 2.
2:41
If I click to increase one
of the item's quantity,
2:44
we see the quantity
update in state as well.
2:48
In fact, I can even update
the quantity here in the state and
2:51
watch the value immediately
change on the screen.
2:55
I'll even go back to the App component and
do the same with one of the names.
2:59
As you can see, state is what keeps
your UI in sync with your data.
3:05
As the data changes,
3:09
different components of your app will
update what they show to the user.
3:11
Normally, in a regular
JavaScript application,
3:15
the more data you have and
the more spread out it is,
3:18
the more complex the application
becomes to maintain and debug.
3:22
React provides a more convenient way to
store and maintain your data with state.
3:26
Now, this doesn't mean that props will
no longer be useful or necessary.
3:32
Props still play a major
role in your application.
3:37
Because as you'll soon learn, data from
state is distributed through props.
3:41
For example, each Item component
still receives the name from props.
3:46
Props is still how you get
data into a component.
3:52
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up