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 React, state is never modified directly. The only way React allows you to update a component's state is by using the set function returned by the useState Hook
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
Our Increment button is now wired up
to the incrementQuantity event handler.
0:00
So next, let's update the quantity state
inside the incrementQuantity function,
0:05
so that each time a user
clicks the plus button,
0:11
the Counter's quantity increases by one.
0:15
It's important to remember that
state is never modified directly.
0:18
In other words, we can't just add
1 to the quantity state like this.
0:22
You can only change a component state
using the state setter function we
0:28
received from the useState hook.
0:33
So in our incrementQuantity, let's call
our state setter function, setQuantity.
0:35
React needs to be told when state changes.
0:43
When you use the setter function,
it's like sending a message to React.
0:46
You're saying, hey, things
are different now, time for an update.
0:50
When you use the setter function, tell
it the new value you want for the state.
0:54
For us, when incrementQuantity is called,
0:59
we want to set the quantity state
to 1 more than its current value.
1:03
To recap, setQuantity does two jobs,
it updates the state's value and
1:07
then tells React, hey,
do your thing and freshen up the UI.
1:13
Our event handler is all set
to update our quantity state.
1:18
Let's save our change and
head on over to the browser.
1:22
Click on the plus button and
see the quantity increase.
1:27
Great, now that you've learned
how to create event handlers,
1:30
use React events, and update state,
why don't you write a function
1:34
called decrementQuantity that
decreases the quantity by 1?
1:39
Go ahead and
pause the video to give it a shot.
1:44
DecrementQuantity should work
just like incrementQuantity, but
1:51
subtracting one instead of adding 1.
1:55
I'll copy the incrementQuantity
function and paste it below.
1:57
I'll rename it to decrementQuantity.
2:03
And inside setQuantity,
2:06
I'll subtract 1 from the quantity by
changing the plus operator to a minus.
2:08
To go a little further, I never want
the quantity to be a negative number.
2:14
That would just not make sense.
2:19
So before we update the state,
2:21
I'll add an if statement that checks
if the quantity is greater than 0.
2:23
If so, we'll decrease the quantity by 1.
2:28
Next I'll add React's onclick
event to the minus button and
2:32
pass it decrementQuantity.
2:38
Let's save our code and
test our changes in the browser.
2:40
We're able to increase and
decrease the quantity, and
2:45
our app doesn't let us decrease
the quantity beyond 0, great job so far.
2:48
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