1
00:00:01,050 --> 00:00:03,690
‫So now that we know what state is

2
00:00:03,690 --> 00:00:07,263
‫let's try to implement it in our small project.

3
00:00:08,580 --> 00:00:10,440
‫And just as a quick reminder,

4
00:00:10,440 --> 00:00:11,413
‫what we want to happen

5
00:00:11,413 --> 00:00:16,200
‫is that when we click this next and this previous button

6
00:00:16,200 --> 00:00:18,840
‫we basically want the step to change.

7
00:00:18,840 --> 00:00:21,750
‫So the step here is currently set to one,

8
00:00:21,750 --> 00:00:25,530
‫but we want this step variable basically to be dynamic.

9
00:00:25,530 --> 00:00:26,363
‫And so for that,

10
00:00:26,363 --> 00:00:30,853
‫we now need to add a new piece of state to our component.

11
00:00:30,853 --> 00:00:33,840
‫So let's get rid of this

12
00:00:33,840 --> 00:00:36,619
‫and add that new piece of state.

13
00:00:36,619 --> 00:00:40,530
‫So in order to use state in practice in a component,

14
00:00:40,530 --> 00:00:42,660
‫we do it in three steps.

15
00:00:42,660 --> 00:00:45,660
‫First, we add a new state variable,

16
00:00:45,660 --> 00:00:49,830
‫then we use it in a code and usually in JSX.

17
00:00:49,830 --> 00:00:53,340
‫And third, we then update the piece of state

18
00:00:53,340 --> 00:00:55,140
‫in some event handler.

19
00:00:55,140 --> 00:00:57,210
‫And so let's start with the first step

20
00:00:57,210 --> 00:01:00,420
‫which is to actually create the state variable.

21
00:01:00,420 --> 00:01:03,870
‫And we do so using the use state function

22
00:01:03,870 --> 00:01:06,300
‫that React provides to us.

23
00:01:06,300 --> 00:01:09,330
‫So that's use state,

24
00:01:09,330 --> 00:01:11,452
‫and if now I hit enter on my keyboard

25
00:01:11,452 --> 00:01:14,550
‫as this use state here is selected

26
00:01:14,550 --> 00:01:16,559
‫in the VS code auto complete,

27
00:01:16,559 --> 00:01:19,380
‫VS code will automatically import

28
00:01:19,380 --> 00:01:22,140
‫the use state function from React.

29
00:01:22,140 --> 00:01:24,150
‫So this line of code right here.

30
00:01:24,150 --> 00:01:26,730
‫Now if for some reason that didn't happen

31
00:01:26,730 --> 00:01:28,260
‫in your code editor,

32
00:01:28,260 --> 00:01:31,350
‫then make sure that you import the use state function

33
00:01:31,350 --> 00:01:33,900
‫from React in that way.

34
00:01:33,900 --> 00:01:36,990
‫So the use state function is a function,

35
00:01:36,990 --> 00:01:39,180
‫and so it takes an argument,

36
00:01:39,180 --> 00:01:41,850
‫and the argument that we need to specify here

37
00:01:41,850 --> 00:01:45,305
‫is the default value of this state variable.

38
00:01:45,305 --> 00:01:49,644
‫So that's in our case step number one, right.

39
00:01:49,644 --> 00:01:52,320
‫Now this use state function here

40
00:01:52,320 --> 00:01:53,850
‫will return an array.

41
00:01:53,850 --> 00:01:58,850
‫And so actually let's just call it array for now

42
00:01:59,007 --> 00:02:01,233
‫and then log it to the console.

43
00:02:02,130 --> 00:02:03,693
‫So just so you see.

44
00:02:04,800 --> 00:02:07,869
‫And so yeah, now step is no longer defined.

45
00:02:07,869 --> 00:02:11,070
‫Let's just put that back for a minute.

46
00:02:11,070 --> 00:02:16,070
‫Step equals one, and then open up our console here.

47
00:02:19,890 --> 00:02:21,690
‫So this is the array.

48
00:02:21,690 --> 00:02:24,510
‫And so you see it has two values here.

49
00:02:24,510 --> 00:02:27,660
‫So this first value, so this number one,

50
00:02:27,660 --> 00:02:31,050
‫is the default value that we want for our state.

51
00:02:31,050 --> 00:02:32,370
‫So this one here.

52
00:02:32,370 --> 00:02:34,260
‫And then the second one is a function

53
00:02:34,260 --> 00:02:37,760
‫that we can use to update our state variable.

54
00:02:37,760 --> 00:02:39,450
‫So what we usually do

55
00:02:39,450 --> 00:02:42,903
‫is to then immediately destructure this array right here.

56
00:02:43,904 --> 00:02:48,904
‫So first we have step, which again is this first right here.

57
00:02:50,520 --> 00:02:53,610
‫And so this will be our state variable itself.

58
00:02:53,610 --> 00:02:56,010
‫And then second, again, we have the function.

59
00:02:56,010 --> 00:02:58,017
‫And so this one we usually call set

60
00:02:58,017 --> 00:03:00,810
‫and then the name of the state variable.

61
00:03:00,810 --> 00:03:02,901
‫So set step in this case.

62
00:03:02,901 --> 00:03:05,871
‫Now we can get rid of this.

63
00:03:05,871 --> 00:03:07,740
‫And if we now reload,

64
00:03:07,740 --> 00:03:11,580
‫we see that our app is already using that piece of state,

65
00:03:11,580 --> 00:03:14,670
‫so that step variable, because this is exactly

66
00:03:14,670 --> 00:03:17,490
‫the variable name that we had before.

67
00:03:17,490 --> 00:03:21,720
‫So we are already using the step in our JSX here,

68
00:03:21,720 --> 00:03:25,143
‫and here, and also here for this class name.

69
00:03:26,270 --> 00:03:30,090
‫Okay, so we have completed the first step

70
00:03:30,090 --> 00:03:32,010
‫of defining the state variable

71
00:03:32,010 --> 00:03:33,810
‫using the use state function,

72
00:03:33,810 --> 00:03:38,412
‫and the second step in which we use the state variable,

73
00:03:38,412 --> 00:03:42,390
‫so this step piece of state in our code.

74
00:03:42,390 --> 00:03:45,438
‫And so now the third step is to actually update the state

75
00:03:45,438 --> 00:03:47,043
‫in an event handler.

76
00:03:48,870 --> 00:03:50,580
‫So let's get rid of this alert

77
00:03:50,580 --> 00:03:52,748
‫which was just a placeholder.

78
00:03:52,748 --> 00:03:55,500
‫Or actually let's start with this one.

79
00:03:55,500 --> 00:03:56,613
‫So at the next one.

80
00:03:58,200 --> 00:04:02,820
‫So, now it's time to use this set step function here.

81
00:04:02,820 --> 00:04:07,820
‫So we use set step to update the step state variable.

82
00:04:09,570 --> 00:04:12,510
‫And so what do we want the step to be?

83
00:04:12,510 --> 00:04:17,510
‫Well, basically just the current step plus one, right?

84
00:04:19,440 --> 00:04:22,822
‫So when we click the next button, the step should go one up.

85
00:04:22,822 --> 00:04:26,790
‫And so that's the current step plus one.

86
00:04:26,790 --> 00:04:29,035
‫And so now we are ready to test this.

87
00:04:29,035 --> 00:04:31,110
‫So let's see,

88
00:04:31,110 --> 00:04:33,586
‫and yeah, that works.

89
00:04:33,586 --> 00:04:38,586
‫So our component is now dynamic and so congratulations,

90
00:04:39,000 --> 00:04:44,000
‫you just unlocked the power of state and the power of React.

91
00:04:44,520 --> 00:04:47,850
‫So what happened here as we clicked on this button

92
00:04:47,850 --> 00:04:51,870
‫was that the handle next event handle function was caught,

93
00:04:51,870 --> 00:04:56,610
‫and this event handler then updated the step state.

94
00:04:56,610 --> 00:04:59,820
‫And so then React automatically rendered

95
00:04:59,820 --> 00:05:02,133
‫this new component view for us.

96
00:05:03,210 --> 00:05:05,430
‫So that's just amazing.

97
00:05:05,430 --> 00:05:06,570
‫Now let's go back here,

98
00:05:06,570 --> 00:05:10,020
‫and implement also the handle previous function.

99
00:05:10,020 --> 00:05:12,656
‫And here we basically want the opposite.

100
00:05:12,656 --> 00:05:17,343
‫So set step, and then step minus one.

101
00:05:18,330 --> 00:05:19,740
‫So let's see,

102
00:05:19,740 --> 00:05:22,080
‫and yeah, that works.

103
00:05:22,080 --> 00:05:26,160
‫However, right now we have a small bug in our app

104
00:05:26,160 --> 00:05:29,343
‫because watch what happens when I keep clicking here.

105
00:05:30,660 --> 00:05:34,920
‫So you see step zero and step minus one and so on.

106
00:05:34,920 --> 00:05:36,090
‫And the same here.

107
00:05:36,090 --> 00:05:39,210
‫So if I keep going, then of course we have no more elements

108
00:05:39,210 --> 00:05:41,133
‫in our array to show.

109
00:05:41,133 --> 00:05:43,770
‫So the array only has three elements.

110
00:05:43,770 --> 00:05:47,370
‫And so step five or anything below step zero

111
00:05:47,370 --> 00:05:48,960
‫doesn't make any sense.

112
00:05:48,960 --> 00:05:50,666
‫And so here in the handler function,

113
00:05:50,666 --> 00:05:54,960
‫we can simply add a condition in order to prevent that.

114
00:05:54,960 --> 00:05:59,960
‫So let's just say if the step is greater than one

115
00:06:01,230 --> 00:06:03,570
‫only then set this step,

116
00:06:03,570 --> 00:06:06,330
‫and then, here something similar.

117
00:06:06,330 --> 00:06:11,283
‫So if the step is less than three.

118
00:06:12,360 --> 00:06:15,000
‫So let's see, let's reload this.

119
00:06:15,000 --> 00:06:19,692
‫And so now if I click next, so right now the step is three,

120
00:06:19,692 --> 00:06:22,170
‫so this one here is no longer true.

121
00:06:22,170 --> 00:06:24,828
‫And so now then this part should not be executed,

122
00:06:24,828 --> 00:06:28,320
‫and indeed, that works.

123
00:06:28,320 --> 00:06:30,180
‫So we fixed that small bug

124
00:06:30,180 --> 00:06:34,507
‫and now our component is working just as we want it.

125
00:06:34,507 --> 00:06:35,703
‫Great.

126
00:06:36,840 --> 00:06:38,460
‫Now just a few more things

127
00:06:38,460 --> 00:06:41,880
‫about the creation of the state variable here.

128
00:06:41,880 --> 00:06:44,483
‫So first of all, this use state function here

129
00:06:44,483 --> 00:06:47,520
‫is what we call a hook in React.

130
00:06:47,520 --> 00:06:48,738
‫And we can identify hooks

131
00:06:48,738 --> 00:06:52,651
‫because they start with this use keyword here.

132
00:06:52,651 --> 00:06:56,357
‫So all the React functions that start with use like this,

133
00:06:56,357 --> 00:07:00,306
‫for example, use effect or use reducer,

134
00:07:00,306 --> 00:07:04,110
‫and of course, this use state, are React hooks.

135
00:07:04,110 --> 00:07:05,370
‫And we will learn in detail

136
00:07:05,370 --> 00:07:08,100
‫what a React hook is a bit later.

137
00:07:08,100 --> 00:07:09,810
‫But for now, what you need to know

138
00:07:09,810 --> 00:07:11,465
‫is that we can only call hooks

139
00:07:11,465 --> 00:07:15,341
‫like use state, on the top level of the function.

140
00:07:15,341 --> 00:07:18,870
‫So of this component function right here.

141
00:07:18,870 --> 00:07:22,740
‫So only here is it allowed to call use state

142
00:07:22,740 --> 00:07:24,750
‫not inside an if statement,

143
00:07:24,750 --> 00:07:28,020
‫or inside another function, or inside a loop.

144
00:07:28,020 --> 00:07:31,410
‫So for example, we could not do this.

145
00:07:31,410 --> 00:07:34,020
‫So immediately React would then tell us

146
00:07:34,020 --> 00:07:37,440
‫that the use state hook was caught in a function

147
00:07:37,440 --> 00:07:40,165
‫that is not a React function component.

148
00:07:40,165 --> 00:07:42,993
‫So we can only do that right here.

149
00:07:44,100 --> 00:07:47,293
‫So also not in an if statement.

150
00:07:47,293 --> 00:07:50,763
‫So let's say if true for example,

151
00:07:52,742 --> 00:07:56,310
‫then let's see, and again, you see immediately

152
00:07:56,310 --> 00:07:58,020
‫that we get this error saying

153
00:07:58,020 --> 00:08:00,570
‫that use state was caught conditionally,

154
00:08:00,570 --> 00:08:04,213
‫and before it actually gets to this dramatic error here,

155
00:08:04,213 --> 00:08:07,470
‫we can even see in this overlay in VS code

156
00:08:07,470 --> 00:08:10,500
‫that React hook was caught conditionally.

157
00:08:10,500 --> 00:08:13,650
‫And this one here is coming from ESLint by the way.

158
00:08:13,650 --> 00:08:14,576
‫And that's why it was so important

159
00:08:14,576 --> 00:08:17,373
‫to set up ESLint in the beginning.

160
00:08:18,392 --> 00:08:19,770
‫Okay.

161
00:08:19,770 --> 00:08:22,320
‫But anyway, let's remove all of this.

162
00:08:22,320 --> 00:08:25,080
‫And now the other important thing about state

163
00:08:25,080 --> 00:08:27,990
‫is that we should really only update state

164
00:08:27,990 --> 00:08:30,810
‫using this setter function right here.

165
00:08:30,810 --> 00:08:32,550
‫So not manually.

166
00:08:32,550 --> 00:08:35,653
‫Now, just to finish, I just noticed that here

167
00:08:35,653 --> 00:08:40,653
‫we actually don't need this when we use our step here.

168
00:08:40,932 --> 00:08:45,390
‫So there is no need for a template literal here

169
00:08:45,390 --> 00:08:48,120
‫because here we are not really creating a new string.

170
00:08:48,120 --> 00:08:50,912
‫We are just basically outputting a new string

171
00:08:50,912 --> 00:08:54,570
‫based here on this turnery operator.

172
00:08:54,570 --> 00:08:55,403
‫But anyway,

173
00:08:55,403 --> 00:08:58,980
‫we now have this nice dynamic component

174
00:08:58,980 --> 00:09:01,740
‫all without the imperative dom manipulations

175
00:09:01,740 --> 00:09:04,053
‫that we need in vanilla JavaScript.