1
00:00:01,220 --> 00:00:02,990
We come back this way.

2
00:00:02,990 --> 00:00:03,670
We left.

3
00:00:03,680 --> 00:00:06,710
So in this video, let's create a button.

4
00:00:06,710 --> 00:00:12,590
When we click on it, it's going to increase the counter from 0 to 1.

5
00:00:12,800 --> 00:00:16,520
And that is what we call updating states.

6
00:00:16,640 --> 00:00:25,790
So we have a function called set count here and we are going to use this set count to update a value

7
00:00:25,790 --> 00:00:27,320
or the initial state.

8
00:00:27,530 --> 00:00:29,870
So we need to create a function here.

9
00:00:30,290 --> 00:00:36,260
So counts the rule is that you shouldn't call set states in the component.

10
00:00:36,290 --> 00:00:43,490
If you check the rules about how we manage states or even handles, it says that you shouldn't call

11
00:00:43,520 --> 00:00:47,720
such state in a component, but instead call inside a function.

12
00:00:48,500 --> 00:00:53,660
So we're going to create a function here and says Increase.

13
00:00:54,500 --> 00:00:55,370
Count.

14
00:00:56,340 --> 00:01:00,140
And going to be my function like this.

15
00:01:00,150 --> 00:01:06,210
And now here we can call said state to update my value.

16
00:01:06,720 --> 00:01:09,660
So for set state sorry set count.

17
00:01:09,660 --> 00:01:13,290
Where is my function to update my.

18
00:01:14,060 --> 00:01:14,810
Count.

19
00:01:15,290 --> 00:01:23,270
So here we pass in a callback function and here we have access to the previous state.

20
00:01:23,270 --> 00:01:24,830
So previous.

21
00:01:26,080 --> 00:01:26,830
States.

22
00:01:28,050 --> 00:01:28,340
It.

23
00:01:30,630 --> 00:01:31,630
Like this one.

24
00:01:31,650 --> 00:01:36,450
And now what comes back is we can quickly console that.

25
00:01:36,450 --> 00:01:42,360
Look, the previous states were going to be as the PBO states.

26
00:01:42,660 --> 00:01:49,290
So when you call this function, we have access to the previous state, so let's call it a function

27
00:01:49,290 --> 00:01:49,860
here.

28
00:01:50,670 --> 00:01:53,910
Increase, count, quite a function and a component.

29
00:01:53,910 --> 00:02:02,070
So if I call it at nine to see something, we're going to happen because we didn't call the functions

30
00:02:02,070 --> 00:02:03,700
automatically like this one, like I said.

31
00:02:03,700 --> 00:02:07,140
So unless you pass a function to be called remember.

32
00:02:07,320 --> 00:02:13,440
So if you didn't call such state inside a component, but instead pass it to an event handler.

33
00:02:13,890 --> 00:02:16,050
So here, let's create a button.

34
00:02:16,050 --> 00:02:19,920
And this button here is going to say increase counts.

35
00:02:21,940 --> 00:02:23,590
Let's say increase count.

36
00:02:24,910 --> 00:02:30,010
Like that and now we can pass in the event on click.

37
00:02:30,010 --> 00:02:37,660
When you click on you want to call the increased count and there we go.

38
00:02:38,020 --> 00:02:39,880
So now let's check the console.

39
00:02:39,930 --> 00:02:47,170
If I click up, sorry if I click on the increase, can see that.

40
00:02:47,440 --> 00:02:50,440
First of all, the initial value was zero.

41
00:02:50,470 --> 00:02:51,490
We have it here.

42
00:02:51,850 --> 00:02:58,180
But the positive ones, if you click on undefined plus undefined has been replaced with a zero.

43
00:02:58,180 --> 00:03:00,070
I have undefined undefined here.

44
00:03:00,340 --> 00:03:09,520
So instead of this console like this one, we can take the previous one pivot state and then plus one.

45
00:03:10,060 --> 00:03:14,540
And now if you click on this one, going to increase from 0 to 1.

46
00:03:14,560 --> 00:03:15,400
Check it out.

47
00:03:15,880 --> 00:03:20,140
Now, when I click on this, first of all, is now.

48
00:03:21,540 --> 00:03:21,960
Now.

49
00:03:21,960 --> 00:03:26,580
Yeah, because I didn't refresh it so that let me refresh again.

50
00:03:27,630 --> 00:03:35,310
And now if I click on it, I have count from five, seven, eight, nine, ten and upwards.

51
00:03:35,370 --> 00:03:39,930
That is how we make use of what the set count.

52
00:03:40,260 --> 00:03:48,270
So here we can simplify making this way, plus, plus, and then remove this one, this normal JavaScript.

53
00:03:48,390 --> 00:03:50,130
So let's refresh it.

54
00:03:50,610 --> 00:03:51,900
And now let's click on it.

55
00:03:51,900 --> 00:03:54,600
And now it's the same way.

56
00:03:54,960 --> 00:03:58,320
So in the next video, we will create a button here.

57
00:03:58,320 --> 00:04:06,900
When you click on it, it should decrease the state by one so we can pause this video and then try on

58
00:04:06,900 --> 00:04:07,260
your own.

59
00:04:07,290 --> 00:04:10,560
Otherwise, let's get continue in the next video.