Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Updating State

2:54 with Laura Coronel

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

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