1
00:00:00,820 --> 00:00:03,550
Let's figure out what code we just wrote into the accordion component.

2
00:00:03,790 --> 00:00:05,920
We're going to first start with this line of code right here.

3
00:00:06,520 --> 00:00:10,390
You'll notice what he called a function called the you state that is coming from the react library.

4
00:00:11,100 --> 00:00:14,620
You state is one of the react primitive hooks that is available to us.

5
00:00:15,070 --> 00:00:20,410
The goal of you state is specifically to give us access to the state system inside of a functional component.

6
00:00:21,390 --> 00:00:26,260
The next thing I want to mention is that whenever we call you states, we're making use of this very

7
00:00:26,260 --> 00:00:28,300
strange syntax off to the left hand side.

8
00:00:28,780 --> 00:00:33,040
Let's do a quick aside and understand what the syntax is all about, because it really looks like we

9
00:00:33,040 --> 00:00:37,690
are making an array in a location where we normally definitely do not make an array.

10
00:00:39,020 --> 00:00:39,500
All right.

11
00:00:39,780 --> 00:00:40,730
No quick code snippet.

12
00:00:42,040 --> 00:00:47,010
I'm gonna write out a quick example inside my console, but since I syntax that we saw is referred to

13
00:00:47,040 --> 00:00:53,070
as a Ray D structuring the idea behind a radio structuring is identical to Object D structuring.

14
00:00:53,460 --> 00:00:57,150
It is just a shortcut to get access to some elements inside of an array.

15
00:00:57,930 --> 00:01:03,990
For example, I could have an array called colors with a value of red and green.

16
00:01:05,160 --> 00:01:11,670
Naturally, I can now access these two elements by writing out colors at zero or colors at one.

17
00:01:12,450 --> 00:01:18,000
However, if I did so and I wanted to assign these to two separate variables, I would end up with three

18
00:01:18,060 --> 00:01:18,660
lines of code.

19
00:01:18,660 --> 00:01:24,030
In total, I would have to write out concert colors and then I'd have to write out something like Red

20
00:01:24,030 --> 00:01:26,460
color is colors at zero.

21
00:01:27,950 --> 00:01:29,870
And green color.

22
00:01:31,360 --> 00:01:33,490
Is colors at one in total?

23
00:01:33,940 --> 00:01:35,980
One line of code just to get the array.

24
00:01:36,850 --> 00:01:42,640
Another line of code to get a reference to the first element and another to get reference to the second

25
00:01:42,700 --> 00:01:47,740
element that is really tedious, to write out these colors at zero in colors that one minds.

26
00:01:48,250 --> 00:01:50,770
So instead, we would make use of a radio structuring.

27
00:01:51,250 --> 00:01:53,470
We could write out something like Arnst.

28
00:01:54,570 --> 00:01:57,210
First element and second element.

29
00:01:58,930 --> 00:01:59,820
Equals colors.

30
00:01:59,920 --> 00:02:00,430
Like so.

31
00:02:01,780 --> 00:02:06,650
The square brackets that you see on the left hand side are not creating an array, no array whatsoever

32
00:02:06,650 --> 00:02:07,580
is being created.

33
00:02:07,940 --> 00:02:14,000
Instead, this is some syntax to tell JavaScript that we want to get access to the first element inside

34
00:02:14,000 --> 00:02:18,470
of the colors array and assign it to a new variable called first element.

35
00:02:19,310 --> 00:02:24,050
We then want to get access to the second element inside that array and assign it to a variable called

36
00:02:24,080 --> 00:02:25,190
second element.

37
00:02:25,880 --> 00:02:32,030
So if I now run that, I can have a variable called first element and second element.

38
00:02:33,580 --> 00:02:38,700
So it's just a way that is a shortcut to get references to elements inside of an array.

39
00:02:40,750 --> 00:02:44,850
So we can apply that back to this line of code right here, whenever we call you states.

40
00:02:44,950 --> 00:02:48,610
We get back an array with exactly two elements inside of it.

41
00:02:49,240 --> 00:02:51,910
Rather than writing out something like, say.

42
00:02:53,060 --> 00:02:58,160
Things and then active index is things at zero.

43
00:02:59,900 --> 00:03:05,150
And set active index is things at one which is really tedious.

44
00:03:05,360 --> 00:03:07,370
We instead use that a radio structuring.

45
00:03:08,410 --> 00:03:10,840
That is all that's going on with those square brackets.

46
00:03:11,560 --> 00:03:14,440
So how about the individual names, like what are these actual variables?

47
00:03:15,130 --> 00:03:20,890
Well, this first argument coming back from calling you state is the piece of state that we are trying

48
00:03:20,890 --> 00:03:21,880
to keep track of.

49
00:03:22,180 --> 00:03:26,860
So this is a reference to some variable or some assuming some value that is going to change over time.

50
00:03:27,960 --> 00:03:33,510
The second element inside the array set active index is a function that we call to update our piece

51
00:03:33,510 --> 00:03:34,020
of state.

52
00:03:34,710 --> 00:03:39,720
Anytime that we call this center function right here to update our piece of state, just like inside

53
00:03:39,720 --> 00:03:43,980
of a Class-Based component, it will cause our entire component to automatically render.

54
00:03:45,770 --> 00:03:50,840
Finally, whenever we call you states, it takes in one argument and that is going to be the default

55
00:03:50,840 --> 00:03:52,220
value for our piece of state.

56
00:03:52,970 --> 00:03:57,500
So in total, that entire line essentially can be summed up inside this diagram.

57
00:03:59,750 --> 00:04:00,700
So we call you states.

58
00:04:00,800 --> 00:04:02,110
We put in our initial value.

59
00:04:03,080 --> 00:04:06,740
That initial value is immediately assigned to active index over here.

60
00:04:07,640 --> 00:04:11,180
And then we can update that value using set active index.

61
00:04:12,210 --> 00:04:17,370
The names of set are some of the names of active index and set active index are not special.

62
00:04:17,730 --> 00:04:19,800
We can change these names to be anything we want.

63
00:04:20,250 --> 00:04:23,970
So if we have some other piece of state inside of a function component, we want to keep track of.

64
00:04:24,210 --> 00:04:26,910
To represent, say, a name of a person.

65
00:04:27,210 --> 00:04:28,680
We would update this to something like.

66
00:04:28,960 --> 00:04:29,400
Name.

67
00:04:30,420 --> 00:04:30,700
Set.

68
00:04:30,720 --> 00:04:31,110
Name.

69
00:04:32,180 --> 00:04:35,480
And maybe as an initial value, we would provide an empty string.

70
00:04:36,610 --> 00:04:42,130
If you're trying to keep track of some counter, we might put in counter, set, counter and then maybe

71
00:04:42,130 --> 00:04:43,880
the default for our counter is zero.

72
00:04:45,610 --> 00:04:49,990
And finally, if we want to implement some kind of color picker where user picks the color of, say,

73
00:04:49,990 --> 00:04:56,080
red or green or something like that, we might have color, set, color, and then maybe we would have

74
00:04:56,080 --> 00:04:58,120
an initial value of, say, green.

75
00:04:58,550 --> 00:05:03,610
And now anytime we want to update these selected color, we would call set color with a new color.

76
00:05:05,570 --> 00:05:11,300
Now, the piece of state right here, the setter and the initial value have direct parallels to the

77
00:05:11,360 --> 00:05:13,640
class component implementation of state.

78
00:05:14,210 --> 00:05:15,560
Let me show you a diagram to explain.

79
00:05:17,050 --> 00:05:19,970
OK, so as we just saw it and said a reminder diagram, a moment to go.

80
00:05:20,110 --> 00:05:20,920
This one right here.

81
00:05:21,340 --> 00:05:25,190
We mentioned that inside of a Class-Based component, we had to initialize evalu states.

82
00:05:25,750 --> 00:05:30,810
We had to change the value of state at some point time and we had to reference a piece of state as well.

83
00:05:32,450 --> 00:05:36,180
So inside this diagram, we've got how we would do that inside of a Class-Based component.

84
00:05:36,360 --> 00:05:41,010
And then the equivalent in a function component world where we are making use of the you state hook.

85
00:05:42,350 --> 00:05:47,090
So to initialize the piece of state inside of a component we write out, state equals an object.

86
00:05:47,510 --> 00:05:52,880
Inside that object is our state name or the property name and then an initial value for it.

87
00:05:53,910 --> 00:05:57,450
In a function component, we instead just call you states provide the initial value right there.

88
00:05:58,460 --> 00:06:00,990
To reference our piece of state inside of a class component.

89
00:06:01,020 --> 00:06:05,850
If this dot, state, dot, whatever our property is called, inside of a function component, it is

90
00:06:05,910 --> 00:06:07,740
whatever we named our piece of state.

91
00:06:08,070 --> 00:06:09,480
And again, the name of that piece of state.

92
00:06:09,570 --> 00:06:12,930
So this variable name and this variable name are not special.

93
00:06:12,960 --> 00:06:14,430
We can call them whatever we want.

94
00:06:16,210 --> 00:06:20,380
And then finally, to update state inside of a class component we call set state and provide an object.

95
00:06:20,810 --> 00:06:25,780
But inside of a function component, we call that center function and just provide the new value.

96
00:06:26,290 --> 00:06:28,990
And we saw that right here inside of set titled Click.

97
00:06:29,530 --> 00:06:32,080
We call that center function and provided a new value.

98
00:06:34,120 --> 00:06:40,140
Now, the one key thing that is kind of confusing, in my personal opinion, between class components

99
00:06:40,170 --> 00:06:45,030
and function components when it comes to the state system, is that with a class component, we can

100
00:06:45,030 --> 00:06:50,100
very easily define and change multiple pieces of state at the same time.

101
00:06:50,910 --> 00:06:55,860
For example, let's imagine that we wanted to have a second piece of state inside of our accordion component,

102
00:06:56,370 --> 00:07:00,570
maybe something to keep track of some search term or something like that.

103
00:07:01,290 --> 00:07:05,490
If we were creating a class based component for that, we would write out some code like you see right

104
00:07:05,490 --> 00:07:05,820
here.

105
00:07:06,520 --> 00:07:13,380
It's a state initial value it for it is active index at zero and term is empty string.

106
00:07:14,410 --> 00:07:19,720
If we then wanted to update those two properties at the exact same time, we could call this DOT said

107
00:07:19,720 --> 00:07:25,450
states and provide an object with a new value for active index and a new value for term inside of a

108
00:07:25,450 --> 00:07:26,400
Class-Based component.

109
00:07:26,440 --> 00:07:32,260
It is really easy and straightforward to initialize and change multiple state values at the same time.

110
00:07:34,040 --> 00:07:37,070
Inside of a function component, however, it's a little bit different.

111
00:07:37,670 --> 00:07:42,590
If we ever want to have multiple pieces of states, we call you state multiple times.

112
00:07:43,220 --> 00:07:45,260
So we wanted to have two pieces of state.

113
00:07:45,470 --> 00:07:52,120
We'd call it twice, once up here to define and initialize the active index piece of states.

114
00:07:52,580 --> 00:07:56,780
And then a second time right here to define and initialize the term piece of states.

115
00:07:57,760 --> 00:08:03,430
If we then wanted to update those state values, we would first call one center, so said active index

116
00:08:03,710 --> 00:08:05,590
and the other center that term.

117
00:08:06,130 --> 00:08:10,270
And actually that should not be set term, tend to be something like search or what have you.

118
00:08:11,580 --> 00:08:11,780
OK.

119
00:08:12,000 --> 00:08:18,570
So in this video provided a lot of information about the use state book, look, if this is all confusing

120
00:08:18,570 --> 00:08:21,000
right now, as usual, do not sweat.

121
00:08:21,000 --> 00:08:25,340
It is we're going to get a tremendous amount of practice with the you state hook.

122
00:08:25,950 --> 00:08:30,330
As I mentioned, this entire accordion application is really just a very small part of a larger app

123
00:08:30,330 --> 00:08:31,200
that we're going to be building.

124
00:08:31,620 --> 00:08:36,540
And so as we continue on with this app right now, we're going to be making use of you state several

125
00:08:36,570 --> 00:08:39,270
more times to get a better idea of how it works.

126
00:08:39,900 --> 00:08:44,670
Let's take a pause right here and come back and understand a little bit more around you state in just

127
00:08:44,670 --> 00:08:45,150
a moment.