1
00:00:01,200 --> 00:00:03,180
‫Let's now take everything that we learned

2
00:00:03,180 --> 00:00:06,510
‫throughout this section in order to make the accordion

3
00:00:06,510 --> 00:00:09,990
‫that we started building earlier a bit better

4
00:00:09,990 --> 00:00:11,613
‫and a bit more real world.

5
00:00:12,930 --> 00:00:14,490
‫And here it is.

6
00:00:14,490 --> 00:00:18,390
‫So just like before, when I click on one of the items,

7
00:00:18,390 --> 00:00:21,420
‫then it'll open, but when I click on another one,

8
00:00:21,420 --> 00:00:23,910
‫then only this one stays open

9
00:00:23,910 --> 00:00:27,270
‫and all the other ones are closed.

10
00:00:27,270 --> 00:00:31,350
‫So basically, what this means is that now each of the items

11
00:00:31,350 --> 00:00:35,250
‫no longer controls whether they are open or not.

12
00:00:35,250 --> 00:00:37,380
‫Instead, it is now the accordion

13
00:00:37,380 --> 00:00:40,590
‫who knows which of the items are opened,

14
00:00:40,590 --> 00:00:45,161
‫and then only that item, basically, is allowed to be open.

15
00:00:45,161 --> 00:00:49,080
‫So for example, if item number three is the one

16
00:00:49,080 --> 00:00:53,850
‫that's currently opened, then number one, two, and 23

17
00:00:53,850 --> 00:00:55,530
‫need to be closed.

18
00:00:55,530 --> 00:00:58,980
‫So again, all of these items here need to know

19
00:00:58,980 --> 00:01:02,664
‫which is the currently open item, and so that means

20
00:01:02,664 --> 00:01:06,930
‫that we now need to move our state from the item

21
00:01:06,930 --> 00:01:09,393
‫onto here, the accordion.

22
00:01:12,300 --> 00:01:16,080
‫Now, I still have the code here from part one

23
00:01:16,080 --> 00:01:19,800
‫of the exercise, and to let me know, fork this,

24
00:01:19,800 --> 00:01:23,250
‫so I can basically leave the other part unchanged.

25
00:01:23,250 --> 00:01:26,929
‫But you can totally also work on top of version one,

26
00:01:26,929 --> 00:01:29,523
‫so then you only have that one.

27
00:01:30,930 --> 00:01:34,470
‫So let's now remove this piece of state, because again,

28
00:01:34,470 --> 00:01:38,673
‫now each item no longer controls whether it is open or not.

29
00:01:40,080 --> 00:01:42,630
‫And then we get a bunch of errors,

30
00:01:42,630 --> 00:01:44,493
‫but that's not a problem.

31
00:01:45,510 --> 00:01:46,893
‫For now, at least.

32
00:01:48,180 --> 00:01:50,610
‫So here, let's now create that piece of state

33
00:01:50,610 --> 00:01:55,610
‫I was talking about, which will be current open.

34
00:01:55,740 --> 00:01:58,623
‫And so here we will store the number of the item

35
00:01:58,623 --> 00:02:00,960
‫that is currently open.

36
00:02:00,960 --> 00:02:05,960
‫Set is open use state, and we will start with null,

37
00:02:07,560 --> 00:02:10,263
‫so then none of them will be open in the beginning.

38
00:02:11,580 --> 00:02:15,750
‫So again, this curOpen state variable will basically

39
00:02:15,750 --> 00:02:19,320
‫hold the number, so this number right here,

40
00:02:19,320 --> 00:02:21,840
‫of the item dead is currently open.

41
00:02:21,840 --> 00:02:26,840
‫And so then we pass that curOpen into the accordion item,

42
00:02:27,120 --> 00:02:29,010
‫and then from there, it can calculate

43
00:02:29,010 --> 00:02:31,483
‫whether it is currently open or not.

44
00:02:33,505 --> 00:02:34,922
‫So let's do that.

45
00:02:35,814 --> 00:02:37,647
‫Let's pass curOpen in.

46
00:02:41,294 --> 00:02:44,591
‫So we use a prop called curOpen to pass that in,

47
00:02:44,591 --> 00:02:47,749
‫and then we also need to pass this setter function in

48
00:02:47,749 --> 00:02:51,272
‫so that then, down here in the item, we can set

49
00:02:51,272 --> 00:02:55,868
‫the current item to the one that has been clicked.

50
00:02:55,868 --> 00:02:59,106
‫And here, let's use the convention we used before,

51
00:02:59,106 --> 00:03:02,643
‫which is to start with the on prefix.

52
00:03:02,643 --> 00:03:05,226
‫So let's say onOpen, setIsOpen.

53
00:03:09,846 --> 00:03:14,268
‫And now here, let's then receive those props.

54
00:03:14,268 --> 00:03:16,185
‫So, curOpen and onOpen.

55
00:03:21,448 --> 00:03:23,906
‫Here, let's for now just comment this out

56
00:03:23,906 --> 00:03:27,352
‫to get rid of this error right there.

57
00:03:27,352 --> 00:03:30,568
‫And then here, as I was saying, we can basically calculate

58
00:03:30,568 --> 00:03:34,370
‫whether this item is currently opened or not.

59
00:03:34,370 --> 00:03:36,690
‫So we can say, again, isOpen,

60
00:03:36,690 --> 00:03:39,660
‫so bringing back the variable name from before,

61
00:03:39,660 --> 00:03:44,660
‫and then if the number, so if the number of this item

62
00:03:44,850 --> 00:03:47,613
‫is equal to the currently open one.

63
00:03:49,680 --> 00:03:52,500
‫So in that case, isOpen will be true,

64
00:03:52,500 --> 00:03:56,883
‫and then it will be, well, displayed as open.

65
00:03:57,930 --> 00:04:02,700
‫So let's change this here from null to one.

66
00:04:02,700 --> 00:04:04,623
‫And so, that works.

67
00:04:05,550 --> 00:04:08,190
‫So remember that this one add one,

68
00:04:08,190 --> 00:04:10,380
‫and so this is zero, one, and two.

69
00:04:10,380 --> 00:04:13,920
‫So if I said two, then that one is open,

70
00:04:13,920 --> 00:04:17,853
‫and then with zero, the first one is open.

71
00:04:18,810 --> 00:04:22,920
‫Great! So, we created a state variable,

72
00:04:22,920 --> 00:04:26,430
‫we used it in the UI, this time by passing it

73
00:04:26,430 --> 00:04:29,070
‫into the item, and then using it to compute

74
00:04:29,070 --> 00:04:33,453
‫whether the item is currently the open one or if it's not.

75
00:04:35,010 --> 00:04:37,830
‫All right, let's set this back to no,

76
00:04:37,830 --> 00:04:40,410
‫because of course, now we want to update the state

77
00:04:40,410 --> 00:04:43,083
‫by clicking on each of these.

78
00:04:44,160 --> 00:04:48,180
‫So that's right here, so let's get rid of all that,

79
00:04:48,180 --> 00:04:53,180
‫and then let's use our onOpen function.

80
00:04:53,220 --> 00:04:55,020
‫And here it's very simple.

81
00:04:55,020 --> 00:04:59,550
‫All we want to do is to pass in the number.

82
00:04:59,550 --> 00:05:03,330
‫So for example, if we are here in item number one,

83
00:05:03,330 --> 00:05:08,330
‫then when we click, onOpen will run with number one.

84
00:05:08,640 --> 00:05:12,870
‫And remember that onOpen is basically set isOpen,

85
00:05:12,870 --> 00:05:17,193
‫which should be called set current open.

86
00:05:19,050 --> 00:05:22,080
‫All right, so we run it with number one,

87
00:05:22,080 --> 00:05:25,350
‫and so then the state curOpen becomes one,

88
00:05:25,350 --> 00:05:28,410
‫and then what happens down here again

89
00:05:28,410 --> 00:05:32,430
‫is that one is equal to one, and so then that item

90
00:05:32,430 --> 00:05:36,570
‫will become open and all the other ones will stay closed.

91
00:05:36,570 --> 00:05:39,030
‫For example, this one here, item zero.

92
00:05:39,030 --> 00:05:42,150
‫Well, item zero is different than one,

93
00:05:42,150 --> 00:05:44,223
‫so isOpen is false.

94
00:05:46,830 --> 00:05:49,353
‫And that works beautifully.

95
00:05:50,220 --> 00:05:54,270
‫Great! And I know this can be pretty confusing,

96
00:05:54,270 --> 00:05:56,610
‫because we're passing states up and down,

97
00:05:56,610 --> 00:06:00,810
‫but this is basically just the idea of lifting up state.

98
00:06:00,810 --> 00:06:04,260
‫So before we had the state right here in each item,

99
00:06:04,260 --> 00:06:06,420
‫but then suddenly, all of them need to know

100
00:06:06,420 --> 00:06:09,510
‫about the current state, and so therefore we can say

101
00:06:09,510 --> 00:06:12,423
‫that we lifted state up to the closest parent.

102
00:06:14,190 --> 00:06:16,890
‫All right, so after this exercise is done,

103
00:06:16,890 --> 00:06:20,100
‫please take some time to analyze the data flow here

104
00:06:20,100 --> 00:06:21,660
‫in great detail.

105
00:06:21,660 --> 00:06:24,660
‫I'm just moving a bit faster here because we already learned

106
00:06:24,660 --> 00:06:27,933
‫about all of this and this is just an exercise.

107
00:06:29,430 --> 00:06:32,850
‫Okay? Now, next up, what I want to do is to use

108
00:06:32,850 --> 00:06:36,360
‫our knowledge about the children prop.

109
00:06:36,360 --> 00:06:39,990
‫So instead of passing the text in here, like this,

110
00:06:39,990 --> 00:06:43,920
‫it's actually a lot nicer to define the text

111
00:06:43,920 --> 00:06:45,483
‫basically as content.

112
00:06:46,740 --> 00:06:51,740
‫So let's pass that text in here, so el.text,

113
00:06:52,483 --> 00:06:54,750
‫and let's close this.

114
00:06:54,750 --> 00:06:58,293
‫And indeed, now the text is temporarily gone.

115
00:06:59,670 --> 00:07:02,460
‫So we no longer need this prop here,

116
00:07:02,460 --> 00:07:05,970
‫but we need the children prop, which I'd like to add

117
00:07:05,970 --> 00:07:09,510
‫either to the end or to the beginning of this list.

118
00:07:09,510 --> 00:07:14,163
‫And then here, that's no longer text, but children.

119
00:07:15,540 --> 00:07:17,100
‫Yeah, that works great.

120
00:07:17,100 --> 00:07:19,860
‫And with this, we are a lot more flexible

121
00:07:19,860 --> 00:07:21,750
‫when it comes to the kind of content

122
00:07:21,750 --> 00:07:24,453
‫that should be displayed in each of the items.

123
00:07:25,470 --> 00:07:27,633
‫So let's add one manually here.

124
00:07:28,530 --> 00:07:31,680
‫So that's where that 23 comes from in the demo

125
00:07:31,680 --> 00:07:33,063
‫that I showed you earlier.

126
00:07:34,440 --> 00:07:39,090
‫So outside this loop, let's now create just one,

127
00:07:39,090 --> 00:07:43,410
‫one test one here, test one,

128
00:07:43,410 --> 00:07:45,660
‫and this would actually be a string, I guess.

129
00:07:47,400 --> 00:07:49,263
‫The number, let's say 22.

130
00:07:54,420 --> 00:07:56,580
‫Here, let's again repeat the title.

131
00:07:56,580 --> 00:08:01,580
‫And as for the content, let's just come here and copy this.

132
00:08:03,990 --> 00:08:05,790
‫You can write it by hand if you want,

133
00:08:05,790 --> 00:08:09,033
‫or you can just write, really, whatever you want.

134
00:08:12,270 --> 00:08:15,723
‫So just wrapping this here in a P, this one in a UL.

135
00:08:23,610 --> 00:08:26,253
‫At each of these here, simply one LI.

136
00:08:29,190 --> 00:08:33,873
‫So just, I mean, this is not really necessary.

137
00:08:34,710 --> 00:08:35,960
‫This is just to show you.

138
00:08:40,920 --> 00:08:45,920
‫Okay. And so, if we click here now, you see that we are able

139
00:08:46,170 --> 00:08:49,980
‫to pass in this entire JSX as the content.

140
00:08:49,980 --> 00:08:53,460
‫And so that's, again, thanks to the children prop.

141
00:08:53,460 --> 00:08:57,870
‫So here, of course, we only have text, but yeah,

142
00:08:57,870 --> 00:09:02,490
‫here we have this entire piece of HTML, basically.

143
00:09:02,490 --> 00:09:05,190
‫And of course, our entire functionality here

144
00:09:05,190 --> 00:09:08,670
‫of the accordion still works just like before,

145
00:09:08,670 --> 00:09:12,660
‫so we can only have one of them open at the same time.

146
00:09:12,660 --> 00:09:15,180
‫Now, there's just one small thing missing,

147
00:09:15,180 --> 00:09:19,140
‫which is that when we click here, on an open one,

148
00:09:19,140 --> 00:09:21,521
‫it doesn't close, right?

149
00:09:21,521 --> 00:09:24,930
‫So probably you can see that for yourself,

150
00:09:24,930 --> 00:09:28,920
‫and so what we need to do now is to basically

151
00:09:28,920 --> 00:09:33,920
‫set the state to null whenever it is opened already.

152
00:09:34,080 --> 00:09:38,036
‫So when we click here and it is already open,

153
00:09:38,036 --> 00:09:43,036
‫then the new state, so the new current open,

154
00:09:43,590 --> 00:09:46,380
‫should become null, and only otherwise

155
00:09:46,380 --> 00:09:49,230
‫it should be the number.

156
00:09:49,230 --> 00:09:53,100
‫And so that will fix it, indeed.

157
00:09:53,100 --> 00:09:57,420
‫Great! So, that exercise is finished as well,

158
00:09:57,420 --> 00:09:59,220
‫and I hope you found it useful.

159
00:09:59,220 --> 00:10:01,170
‫And now, as I said before,

160
00:10:01,170 --> 00:10:03,720
‫please take some time to analyze the code

161
00:10:03,720 --> 00:10:07,290
‫and the data flow right here in this component.

162
00:10:07,290 --> 00:10:09,360
‫And then, once you're done, you are ready

163
00:10:09,360 --> 00:10:12,813
‫for the mandatory coding challenge in this section.