1
00:00:01,000 --> 00:00:03,690
‫To practice state a little bit more,

2
00:00:03,690 --> 00:00:07,200
‫let's now implement the open and close functionality

3
00:00:07,200 --> 00:00:08,703
‫for our component.

4
00:00:10,200 --> 00:00:12,060
‫So looking at the demo here,

5
00:00:12,060 --> 00:00:15,000
‫what we want to implement now is this functionality

6
00:00:15,000 --> 00:00:17,370
‫that when we click this button here,

7
00:00:17,370 --> 00:00:20,160
‫then this part of the component disappears,

8
00:00:20,160 --> 00:00:23,760
‫and then when we click it again, then it is back.

9
00:00:23,760 --> 00:00:27,720
‫So since this is something that changes on the screen,

10
00:00:27,720 --> 00:00:30,303
‫that means that we need a new piece of state.

11
00:00:31,200 --> 00:00:36,030
‫Let's first comment out this other state that we have here

12
00:00:36,030 --> 00:00:38,490
‫so that we create it for our experiment.

13
00:00:38,490 --> 00:00:40,170
‫I will not completely delete it,

14
00:00:40,170 --> 00:00:42,390
‫just to keep it as a reference here.

15
00:00:42,390 --> 00:00:45,810
‫But anyway, let's now create a new piece of state.

16
00:00:45,810 --> 00:00:48,047
‫So this is going to be called isOpen,

17
00:00:49,440 --> 00:00:52,020
‫and then again the convention for the setter

18
00:00:52,020 --> 00:00:53,670
‫is to call it set

19
00:00:53,670 --> 00:00:56,160
‫and then the name of the state, so setIsOpen,

20
00:00:58,020 --> 00:00:59,763
‫so equal useState,

21
00:01:01,440 --> 00:01:04,410
‫and by default, our component should be open,

22
00:01:04,410 --> 00:01:06,660
‫therefore, we pass in value of true.

23
00:01:06,660 --> 00:01:09,450
‫So isOpen starts as true,

24
00:01:09,450 --> 00:01:12,360
‫and so that's then our default state value

25
00:01:12,360 --> 00:01:13,863
‫for the isOpen state.

26
00:01:14,700 --> 00:01:17,370
‫So that's the first part of using state.

27
00:01:17,370 --> 00:01:21,150
‫The second one is to then actually use the state variable

28
00:01:21,150 --> 00:01:22,800
‫in our code.

29
00:01:22,800 --> 00:01:26,910
‫So what do we want to achieve with this state variable?

30
00:01:26,910 --> 00:01:31,500
‫Well, whenever it is true, we want this here to show.

31
00:01:31,500 --> 00:01:34,800
‫And if it's false, we don't want this to show.

32
00:01:34,800 --> 00:01:38,190
‫And whenever it's false, we don't want this to show.

33
00:01:38,190 --> 00:01:41,253
‫So what this means is that we need conditional rendering.

34
00:01:43,080 --> 00:01:45,930
‫So let's do that.

35
00:01:45,930 --> 00:01:48,870
‫Now we cannot wrap all of this here

36
00:01:48,870 --> 00:01:50,583
‫into JavaScript mode now,

37
00:01:51,600 --> 00:01:53,100
‫but let's still try.

38
00:01:53,100 --> 00:01:55,050
‫So I selected all of it

39
00:01:55,050 --> 00:01:57,420
‫and then I will open the curly braces

40
00:01:57,420 --> 00:01:59,070
‫to enter JavaScript mode.

41
00:01:59,070 --> 00:02:00,420
‫But this will not really work

42
00:02:00,420 --> 00:02:04,560
‫because this can only be done inside some element.

43
00:02:04,560 --> 00:02:08,133
‫So for example, we would need a div here.

44
00:02:11,670 --> 00:02:13,083
‫And so then here, close it.

45
00:02:15,840 --> 00:02:18,513
‫However, React is still not happy.

46
00:02:20,190 --> 00:02:21,963
‫So what do we have here?

47
00:02:22,920 --> 00:02:25,230
‫Ah, test is not defined.

48
00:02:25,230 --> 00:02:28,290
‫So that's because we just removed

49
00:02:28,290 --> 00:02:30,810
‫this piece of state here from before,

50
00:02:30,810 --> 00:02:34,023
‫so let's just comment this out and give it a save.

51
00:02:34,860 --> 00:02:36,570
‫And again, we first needed to create

52
00:02:36,570 --> 00:02:38,580
‫this div element here outside,

53
00:02:38,580 --> 00:02:41,190
‫basically to start our JSX.

54
00:02:41,190 --> 00:02:43,200
‫And so then inside that JSX

55
00:02:43,200 --> 00:02:45,540
‫is where we can enter the JavaScript mode.

56
00:02:45,540 --> 00:02:47,700
‫And we need this JavaScript mode here

57
00:02:47,700 --> 00:02:51,077
‫because now we will use our isOpen.

58
00:02:53,400 --> 00:02:55,560
‫And then as for the conditional rendering,

59
00:02:55,560 --> 00:02:57,933
‫let's simply use the end operator,

60
00:02:59,220 --> 00:03:02,130
‫give it a save, and that's already it.

61
00:03:02,130 --> 00:03:04,140
‫So whenever this is true,

62
00:03:04,140 --> 00:03:06,690
‫then this second part here will be returned.

63
00:03:06,690 --> 00:03:10,680
‫And when it's false, then only false will be returned.

64
00:03:10,680 --> 00:03:13,893
‫So that's just what we learned in the previous section.

65
00:03:14,940 --> 00:03:15,840
‫All right.

66
00:03:15,840 --> 00:03:19,200
‫Now since this is true, nothing happens here,

67
00:03:19,200 --> 00:03:23,163
‫so this is still visible, but if we were to set it to false,

68
00:03:24,150 --> 00:03:25,983
‫then our component should disappear.

69
00:03:26,880 --> 00:03:29,220
‫Yeah, so it's gone.

70
00:03:29,220 --> 00:03:32,673
‫And therefore what this means is that this is working.

71
00:03:33,990 --> 00:03:36,450
‫So let's set it back to true,

72
00:03:36,450 --> 00:03:40,440
‫and with this, we finish the second part of using state.

73
00:03:40,440 --> 00:03:42,720
‫And now the third part of using state

74
00:03:42,720 --> 00:03:45,240
‫is to actually update the state.

75
00:03:45,240 --> 00:03:48,120
‫So for that, we need our button here in the corner

76
00:03:48,120 --> 00:03:52,620
‫and for that, we need to write some more JSX.

77
00:03:52,620 --> 00:03:53,853
‫So let's do that here.

78
00:03:55,260 --> 00:04:00,260
‫So button with a className of close

79
00:04:00,390 --> 00:04:04,620
‫and then here, we can use an HTML entity of times

80
00:04:04,620 --> 00:04:06,513
‫which will basically write an X.

81
00:04:07,500 --> 00:04:08,640
‫There we go.

82
00:04:08,640 --> 00:04:11,100
‫And now we need our event handler.

83
00:04:11,100 --> 00:04:15,270
‫So for that, let's again use the onClick prop,

84
00:04:15,270 --> 00:04:19,710
‫so to directly attach the event handler onto this element.

85
00:04:19,710 --> 00:04:21,510
‫And this time just to show you,

86
00:04:21,510 --> 00:04:24,300
‫let me actually create a function in line here.

87
00:04:24,300 --> 00:04:27,360
‫So instead of creating a handle function out here

88
00:04:27,360 --> 00:04:28,620
‫like these two,

89
00:04:28,620 --> 00:04:31,710
‫I will now define the function directly here.

90
00:04:31,710 --> 00:04:34,980
‫So just to show you that sometimes this is also what we do

91
00:04:34,980 --> 00:04:37,863
‫especially when we have some very simple logic.

92
00:04:39,660 --> 00:04:41,610
‫So we need to create a new function,

93
00:04:41,610 --> 00:04:44,160
‫and now what do we want to do here?

94
00:04:44,160 --> 00:04:47,280
‫Well, we want to update the isOpen state.

95
00:04:47,280 --> 00:04:49,187
‫So set isOpen,

96
00:04:50,850 --> 00:04:54,000
‫and then again, we need to pass in the new state,

97
00:04:54,000 --> 00:04:55,860
‫so the updated state.

98
00:04:55,860 --> 00:04:57,780
‫And what should that be?

99
00:04:57,780 --> 00:05:02,340
‫Well, it should always be the opposite of the current state.

100
00:05:02,340 --> 00:05:05,160
‫So if this open is true, it should become false,

101
00:05:05,160 --> 00:05:07,440
‫and if it's false, it should become true.

102
00:05:07,440 --> 00:05:11,310
‫And the way we do that is by using the not operator.

103
00:05:11,310 --> 00:05:14,763
‫So again, that's just common and standard JavaScript.

104
00:05:16,170 --> 00:05:19,770
‫Okay, and this should now already work.

105
00:05:19,770 --> 00:05:23,160
‫So let's just reload here to get rid of that error.

106
00:05:23,160 --> 00:05:27,090
‫And yes, beautiful.

107
00:05:27,090 --> 00:05:28,950
‫That's working nice.

108
00:05:28,950 --> 00:05:32,520
‫So our view is updated, so it's re-rendered.

109
00:05:32,520 --> 00:05:34,380
‫And so then after that re-render,

110
00:05:34,380 --> 00:05:36,420
‫isOpen is no longer true,

111
00:05:36,420 --> 00:05:37,920
‫but it's false.

112
00:05:37,920 --> 00:05:41,310
‫Therefore, then this entire part here of JSX

113
00:05:41,310 --> 00:05:44,580
‫is no longer rendered, right?

114
00:05:44,580 --> 00:05:46,530
‫But then when we click again,

115
00:05:46,530 --> 00:05:49,290
‫this function here is called again,

116
00:05:49,290 --> 00:05:52,230
‫which will then switch isOpen to the other state.

117
00:05:52,230 --> 00:05:54,990
‫So from false to true, in this case.

118
00:05:54,990 --> 00:05:57,210
‫And so updating this piece of state

119
00:05:57,210 --> 00:06:00,360
‫will then cause React to re-render the component.

120
00:06:00,360 --> 00:06:03,150
‫This time with isOpen to true.

121
00:06:03,150 --> 00:06:07,350
‫So when React then sees this piece of code, isOpen is true,

122
00:06:07,350 --> 00:06:10,290
‫and therefore this JSX is then returned.

123
00:06:10,290 --> 00:06:11,123
‫And so with this,

124
00:06:11,123 --> 00:06:15,720
‫we update the view right here in our application.

125
00:06:15,720 --> 00:06:16,650
‫Great.

126
00:06:16,650 --> 00:06:20,400
‫Now what I want you to notice about this is that...

127
00:06:20,400 --> 00:06:22,680
‫Let's change the state here.

128
00:06:22,680 --> 00:06:25,890
‫So again, with this here, we change the step state,

129
00:06:25,890 --> 00:06:28,140
‫which right now is at number 2.

130
00:06:28,140 --> 00:06:30,600
‫And now if we toggle this state,

131
00:06:30,600 --> 00:06:33,870
‫so if we change this state and change it again,

132
00:06:33,870 --> 00:06:38,400
‫you see that React did indeed remember the state of the step

133
00:06:38,400 --> 00:06:41,610
‫even though we did re-render this component multiple times

134
00:06:41,610 --> 00:06:44,100
‫in between, right?

135
00:06:44,100 --> 00:06:46,890
‫So if we set it to 3, and then again,

136
00:06:46,890 --> 00:06:50,940
‫I can open and I can close, which means that this component,

137
00:06:50,940 --> 00:06:54,540
‫so this view here has been reordered two times,

138
00:06:54,540 --> 00:06:57,960
‫still it will remember this other piece of state.

139
00:06:57,960 --> 00:07:00,030
‫So the 3 is still here.

140
00:07:00,030 --> 00:07:01,440
‫And so that's why we say

141
00:07:01,440 --> 00:07:04,530
‫that state is like a memory of the component.

142
00:07:04,530 --> 00:07:07,230
‫It can hold this information over time

143
00:07:07,230 --> 00:07:11,430
‫even though we render and re-render it over and over again.

144
00:07:11,430 --> 00:07:12,263
‫Great.

145
00:07:12,263 --> 00:07:14,400
‫So with this, I hope you start seeing

146
00:07:14,400 --> 00:07:17,760
‫how we can use state in different situations

147
00:07:17,760 --> 00:07:20,940
‫and for different things in practice.

148
00:07:20,940 --> 00:07:24,120
‫Now, just one small thing that we could change here,

149
00:07:24,120 --> 00:07:26,130
‫and this has nothing to do with state,

150
00:07:26,130 --> 00:07:28,650
‫is that we actually don't want to return

151
00:07:28,650 --> 00:07:30,660
‫just one element here.

152
00:07:30,660 --> 00:07:33,660
‫So we want to return basically both,

153
00:07:33,660 --> 00:07:35,700
‫this part here and the button.

154
00:07:35,700 --> 00:07:36,900
‫And so this means

155
00:07:36,900 --> 00:07:40,143
‫that this is a great use case for a React fragment here.

156
00:07:41,010 --> 00:07:44,160
‫So before I do that, let's just inspect.

157
00:07:44,160 --> 00:07:47,070
‫And so indeed, we have our root

158
00:07:47,070 --> 00:07:48,720
‫which is basically everything,

159
00:07:48,720 --> 00:07:50,100
‫so the entire app.

160
00:07:50,100 --> 00:07:53,970
‫And then in there, we have this div, which is this one.

161
00:07:53,970 --> 00:07:56,160
‫But again, let's say we don't want that.

162
00:07:56,160 --> 00:07:58,260
‫Let's say, we just want to have the button

163
00:07:58,260 --> 00:08:00,423
‫and then this steps div.

164
00:08:01,350 --> 00:08:06,350
‫So let's remove this from here and from here.

165
00:08:06,600 --> 00:08:09,720
‫And so now we have remember a fragment.

166
00:08:09,720 --> 00:08:14,100
‫So that's like the root of this JSX element here

167
00:08:14,100 --> 00:08:16,440
‫which will then disappear in the DOM.

168
00:08:16,440 --> 00:08:17,820
‫So if we take a look now,

169
00:08:17,820 --> 00:08:22,820
‫then we only have this button and the step div.

170
00:08:22,950 --> 00:08:26,130
‫So again, whenever you are in a situation like this,

171
00:08:26,130 --> 00:08:30,960
‫so what you need a piece of JSX to return two elements,

172
00:08:30,960 --> 00:08:33,543
‫then the fragment is great for that.