1
00:00:00,180 --> 00:00:01,080
Not bad, not bad.

2
00:00:01,110 --> 00:00:09,300
I think we're progressing nicely with our used state examples and in our last example, our own showcase,

3
00:00:09,300 --> 00:00:17,640
how we can work with numbers and not only how we can work with numbers, but how we can set up a functional

4
00:00:17,820 --> 00:00:18,420
update.

5
00:00:18,420 --> 00:00:23,100
For all this time, we have been using the value update.

6
00:00:23,700 --> 00:00:30,510
Now, what that means is where we have this function, the subtext or whatever function we get back

7
00:00:30,510 --> 00:00:35,970
from you state, we just call the function and then we pass in that new value.

8
00:00:36,450 --> 00:00:40,710
And that essentially sets our state equal to that new value.

9
00:00:40,830 --> 00:00:48,450
However, there's also a method of passing the function, and in the following videos, I'll show you

10
00:00:48,660 --> 00:00:50,770
why that is important.

11
00:00:51,120 --> 00:00:57,120
But first, I would want you to head back to Objets and then import again component.

12
00:00:57,990 --> 00:01:05,220
You can call it whatever you want from your state events that are polder and then the file name is used

13
00:01:05,220 --> 00:01:10,170
state counter, essentially that he is going to be our last file.

14
00:01:10,200 --> 00:01:16,620
However, I'll split this up in multiple videos because I would want you to get a better understanding

15
00:01:16,800 --> 00:01:18,160
of what we're doing.

16
00:01:18,510 --> 00:01:24,600
So once you import of this file, then just navigate there and you should see on a screen you state

17
00:01:24,600 --> 00:01:30,960
counter example and you can probably already guess that we are going to create a counter with not just

18
00:01:30,960 --> 00:01:31,950
a simple counter.

19
00:01:32,250 --> 00:01:38,150
We'll have one we straight up values and the second one we'll use of the function.

20
00:01:38,550 --> 00:01:45,270
Now, we'll start with our turn first, though, where it's not going to be adding to again, we're

21
00:01:45,270 --> 00:01:51,570
going to go for a fragment so we don't need to overpopulate everything with this.

22
00:01:52,020 --> 00:01:57,090
And then once we have our fragment, then I would want to go with a section.

23
00:01:57,390 --> 00:01:59,790
Now, add a little bit of styling right here.

24
00:02:01,020 --> 00:02:07,820
Where I'm going to say margin, and that is going to be equal to four arms and nine zero and nine within

25
00:02:07,830 --> 00:02:14,970
a section, let's just go with heading to and I'm going to call this a regular online counter.

26
00:02:15,720 --> 00:02:21,570
Or you should see something like this on screen now after the heading to I'm going to set up my value.

27
00:02:22,020 --> 00:02:28,110
So at the moment, of course, we don't have anything, but we will use you state and you're not I don't

28
00:02:28,110 --> 00:02:33,360
want to set up a state because that should take us a second since we already know how to do that.

29
00:02:33,360 --> 00:02:38,640
So I'm going to go with value then set value and that is equal to you or your state.

30
00:02:38,850 --> 00:02:45,900
And then as far as my initial value, what that is going to be a number of zero an now and adding one,

31
00:02:45,900 --> 00:02:49,650
I can just simply target my value and surprise, surprise.

32
00:02:49,650 --> 00:02:59,310
Of course I have the zero and all three buttons, one for increase, one for reset and one for decrease.

33
00:03:00,120 --> 00:03:02,190
So I guess we'll start with a decreased one.

34
00:03:02,590 --> 00:03:08,880
Let's go with button line class name that will be equal to Abedian.

35
00:03:09,390 --> 00:03:15,120
And then let's just right here decrease and we'll just copy and paste the same button.

36
00:03:15,120 --> 00:03:21,480
So on two and then of course three buttons total and we just need to change these values around where

37
00:03:21,480 --> 00:03:25,710
we're going to go the reset as well as the increase.

38
00:03:26,350 --> 00:03:27,810
What just go here.

39
00:03:28,260 --> 00:03:36,390
And again, I know I've covered this before, but I'll set up two ways how we can click on a button.

40
00:03:36,660 --> 00:03:39,570
One is going to be with a function here.

41
00:03:39,900 --> 00:03:46,220
So where we reference is, for example, would reset and a decrease and increase is going to be within

42
00:03:46,230 --> 00:03:46,890
line functions.

43
00:03:47,250 --> 00:03:52,860
Just showcase again that you always have multiple ways how to set it up.

44
00:03:52,860 --> 00:03:56,000
And essentially it is up to you now.

45
00:03:56,010 --> 00:04:01,860
There's going to be some cases where you definitely need to use the inline when you are actually passing

46
00:04:01,860 --> 00:04:07,820
in, but then in some cases you can simply use the reference and you're good to go.

47
00:04:08,130 --> 00:04:15,210
So we have our buttons and like I just said, will go with click and then set up in line function here

48
00:04:15,510 --> 00:04:21,900
where we go, it set value and now I'll use the old value, let's say value, whatever it is.

49
00:04:21,930 --> 00:04:29,880
Of course at the moment it is zero and then I'll say minus one because of course the button is decrease

50
00:04:30,300 --> 00:04:32,310
and we'll do the same thing here.

51
00:04:32,310 --> 00:04:35,580
We have an increase and we'll copy and paste.

52
00:04:35,580 --> 00:04:38,100
Now, of course, now the value should be plus one.

53
00:04:38,460 --> 00:04:38,970
Correct.

54
00:04:38,970 --> 00:04:45,210
So once we click on a button, I would want to invoke my sole function and line whatever is the value

55
00:04:45,390 --> 00:04:46,530
and then plus one.

56
00:04:46,830 --> 00:04:54,300
And like I just said for the reset, let's set up a reference just so we are all on the same page,

57
00:04:54,300 --> 00:04:57,690
that we have multiple ways how we can get the same result.

58
00:04:57,700 --> 00:04:59,190
So I'm going to go here with reset.

59
00:04:59,550 --> 00:05:00,720
I'll have my function.

60
00:05:00,720 --> 00:05:06,150
And then within this function, I'm just going to say set value again, my set function, and I'll set

61
00:05:06,150 --> 00:05:07,170
it equal to zero.

62
00:05:07,410 --> 00:05:11,340
And now where I have the reset, I'm just going to go with unclick.

63
00:05:12,000 --> 00:05:13,800
I just need to reference the function.

64
00:05:14,080 --> 00:05:16,770
So in this case, of course, it is a reset.

65
00:05:17,600 --> 00:05:23,420
And then let's start out so once we're clear, of course, notice how we can nicely increase, we can

66
00:05:23,420 --> 00:05:27,030
also decrease and then we can reset.

67
00:05:27,410 --> 00:05:36,250
So again, this is a way of passing directly the value in our step function where we pass, passing

68
00:05:36,260 --> 00:05:36,740
the value.

69
00:05:36,740 --> 00:05:41,150
And then the moment we do that, of course, that is our new state value.

70
00:05:41,390 --> 00:05:48,380
And the following year, I would want to cover the functional updater form when essentially we pass

71
00:05:48,380 --> 00:05:52,300
in a function and why we would want to do that in the first place.