Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Basics!
You have completed React Basics!
Preview
In this video, we'll add state to a component by using the useState Hook in the Counter component
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
In this video, we're going to start by
setting up the initial state within our
0:00
Counter component.
0:04
Remember, in React the state
can change over time,
0:06
usually based on what a user does.
0:09
So what's going to change in our Counter
component when users interact with it?
0:12
Well, it's the quantity,
it will increase or
0:17
decrease depending on
which button they click.
0:20
Quantity is our state.
0:23
To add a state variable to your component,
you'll need to use the useState hook.
0:25
In React, useState,
0:31
as well as any other functions
starting with use, is called a hook.
0:33
Hooks are special functions that let
you hook into different React features.
0:38
State is just one of those features.
0:44
As you go further in your React journey,
you'll learn about other hooks too.
0:46
All right, let's get into how
we use the useState hook.
0:52
To be able to access the useState hook,
0:56
we'll first need to import
it from the React library.
0:59
One way is to import React
from the React library.
1:02
And this will import all of
React hooks components and APIs.
1:07
But wait, we don't need everything
from React, just the useState hook.
1:12
Instead, what you'll see most often
is a named import to just import
1:17
the hook you need.
1:22
We actually did this when we
imported the StrictMode component.
1:24
So to import useState,
let's add a comma, then you useState.
1:28
Now let's go into our Counter component
and start working with state.
1:34
The one main rule to using hooks
is that it can only be called at
1:38
the top level of your component.
1:43
You use React features at
the top of your component,
1:45
similar to how you import
modules at the top of your file.
1:49
So at the top of the component,
I'll type useState.
1:53
The only argument useState accepts is
the initial value of your state variable.
1:56
In our Counter,
we're tracking the quantity of items.
2:04
So let's set the initial quantity to 0.
2:07
Every time your component renders,
useState gives you an array containing
2:11
two values, the state variable and
the state setter function.
2:16
We'll use array destructuring to store
these two values into separate variables.
2:21
I'll name the state variable quantity, and
2:27
the state setter function
will be setQuantity.
2:30
Feel free to name these
variables however you like, but
2:33
following this naming
pattern is pretty common.
2:36
Where you name the setting function set,
plus the state name,
2:39
like setQuantity or setCounter.
2:44
This naming convention makes things
easier to understand across projects.
2:46
So we've got our quantity holding
the state with the initial value of 0.
2:51
And then there's a setQuantity function
we'll use to update the state value.
2:57
We'll talk more about this function and
use it later on in this stage.
3:02
Once you've set up your state jump into
React Dev Tools, select the Counter
3:07
component, and we should see a new section
called hooks appear on the right pane.
3:12
You'll see a state with a value of 0.
3:17
If you click this wand icon,
3:20
it'll show you that our state's
name is quantity, great.
3:22
Time to tidy up a bit.
3:26
Remove the quantity prop being passed
to the Item and Counter components.
3:28
Now that Counter handles its own
quantity state, there is no need
3:34
to pass the quantity information
from its parent Item component.
3:39
You access state similar to
how you access any variable,
3:44
by just calling the variable name.
3:48
In the Counter component's
return statement,
3:51
swap out props.quantity with just
quantity, and save the file.
3:55
All the item quantities are set
to the initial state of 0.
4:00
You can even tweak the quantity state for
4:04
a counter component in the React dev
tools and watch the page update.
4:07
You've just unlocked your
first React hook, nice going.
4:12
In this video, we've created
a quantity state instead of getting
4:16
the quantity from props, but for now,
it might not seem like a big deal.
4:20
Up next, you'll learn how to
modify state inside a component,
4:25
something you couldn't do with props.
4:29
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