1
00:00:00,090 --> 00:00:02,040
Come back in this video.

2
00:00:02,070 --> 00:00:05,850
Let's get started with how we can use use date.

3
00:00:06,240 --> 00:00:12,240
So because we are starting with a new concept, maybe thinking, yes, you need to create a folder for

4
00:00:12,270 --> 00:00:12,720
that.

5
00:00:13,050 --> 00:00:21,810
Hey, so inside the components, let's create a new folder and call it ask use states.

6
00:00:24,100 --> 00:00:35,410
And then let's create a function called you states, does JS and r a f, c e and I have my state.

7
00:00:35,980 --> 00:00:42,010
So let's add H to here and say use state.

8
00:00:42,220 --> 00:00:48,160
So let's go ahead and mount the component inside my app going to be use.

9
00:00:50,290 --> 00:00:51,230
You stay.

10
00:00:51,250 --> 00:00:57,730
Don't be confused with the you that come with the let me get as you state component to be more precise.

11
00:00:58,830 --> 00:00:59,840
Components.

12
00:00:59,850 --> 00:01:00,410
Yeah.

13
00:01:00,420 --> 00:01:06,230
So that it's no conflict with what we are going to some renaming back to.

14
00:01:08,540 --> 00:01:14,900
Components and here to add component you state component.

15
00:01:15,620 --> 00:01:22,760
So let me render that instead of events, let's render the use that component and now I have my use

16
00:01:22,760 --> 00:01:23,450
states.

17
00:01:24,050 --> 00:01:31,850
So we are going to play around with it by creating some simple application called counter application.

18
00:01:32,270 --> 00:01:39,350
So in this one you are going to display a number of counts when a button is being clicked on.

19
00:01:39,350 --> 00:01:48,300
So you state simply means that managing state in a specific component, the state that is being assigned

20
00:01:48,300 --> 00:01:51,230
a component is specific to where it is.

21
00:01:51,440 --> 00:01:54,230
So how can we use you state?

22
00:01:54,230 --> 00:02:03,350
Like we said, we need to require the hook so command and unless the structure that and get the use

23
00:02:03,350 --> 00:02:12,470
states this form react so now you call it a function you states like this one then you pass in the initial

24
00:02:12,680 --> 00:02:17,810
state of value of your component based on how you want it.

25
00:02:17,810 --> 00:02:22,070
Let's say that you want to keep track of log in uses, right?

26
00:02:22,070 --> 00:02:24,530
So initial state it can be false.

27
00:02:24,530 --> 00:02:26,450
Is logging false or true?

28
00:02:26,570 --> 00:02:33,260
But because we are talking about or dealing with how to create a counter application and count application,

29
00:02:33,260 --> 00:02:34,670
there is numbers, right?

30
00:02:34,850 --> 00:02:39,830
So we can say that our initial value of the counter supposed to be zero is zero.

31
00:02:39,830 --> 00:02:49,130
And now what comes back from this you state is you have access to two things and they are in array is

32
00:02:49,130 --> 00:02:50,780
equal to that.

33
00:02:51,260 --> 00:02:59,180
The first one contains the initial state so you can name it whatever you want, but this one represents

34
00:02:59,210 --> 00:03:02,030
this one represent the initial state here.

35
00:03:02,360 --> 00:03:06,810
And then let's say that you want to update this, find this data, this counter.

36
00:03:06,810 --> 00:03:09,470
Let's go to from 0 to 1 to 3 to 4.

37
00:03:09,680 --> 00:03:12,950
We have a function that's going to make it done.

38
00:03:12,950 --> 00:03:20,000
We often use sets in the name of the initial value set count as that's the name convention.

39
00:03:20,330 --> 00:03:30,440
So now if I console that, log the counter the count, let's say you're going to see as what, zero.

40
00:03:31,760 --> 00:03:35,600
So check the console and now this one.

41
00:03:36,080 --> 00:03:38,420
Check it out in your console.

42
00:03:40,380 --> 00:03:44,760
And I see we have RS Zero here.

43
00:03:45,510 --> 00:03:49,030
So now, instead of dumping to the console, let's place it inside.

44
00:03:49,050 --> 00:03:51,330
Let me call it here as.

45
00:03:51,330 --> 00:03:53,010
Let me call us counter up.

46
00:03:54,530 --> 00:04:04,640
Going to app and now let's ad phh2 or three, h three.

47
00:04:04,640 --> 00:04:08,180
And then let's say the counter is.

48
00:04:08,930 --> 00:04:13,040
And now we can inject the counter or the count.

49
00:04:13,160 --> 00:04:17,180
So if I save it now, let's see, let's refresh it.

50
00:04:17,180 --> 00:04:23,090
And I have count zero because it has initial value of zero.

51
00:04:23,360 --> 00:04:31,400
So I make it at 200, save it, and now we have 200 as my initial state.

52
00:04:31,880 --> 00:04:38,060
So if I want to increase from 0 to 1.

53
00:04:39,070 --> 00:04:43,810
That's where we need what is called the set count state.

54
00:04:44,140 --> 00:04:47,070
And in this video, I'm going to create a button here.

55
00:04:47,080 --> 00:04:51,280
When we click on Mitt, then we're going to increase the counter.

56
00:04:51,280 --> 00:04:54,310
So let's get going in the next video.