1 00:00:01,200 --> 00:00:03,780 ‫It's now time for another exercise 2 00:00:03,780 --> 00:00:07,230 ‫so that together we can practice state management 3 00:00:07,230 --> 00:00:10,623 ‫and Thinking in React in general a little bit more. 4 00:00:12,240 --> 00:00:14,910 ‫So together we will build this very simple 5 00:00:14,910 --> 00:00:18,300 ‫accordion component where we can open and close 6 00:00:18,300 --> 00:00:21,720 ‫each of these items of the accordion here. 7 00:00:21,720 --> 00:00:24,060 ‫So when it's closed and we click, it opens. 8 00:00:24,060 --> 00:00:28,140 ‫And when it's open and we click, it basically closes again. 9 00:00:28,140 --> 00:00:31,050 ‫And each of these items has the title 10 00:00:31,050 --> 00:00:32,580 ‫or actually the number here, 11 00:00:32,580 --> 00:00:35,700 ‫the title and then the text itself. 12 00:00:35,700 --> 00:00:40,050 ‫So this is here a question, and this is an answer basically. 13 00:00:40,050 --> 00:00:42,750 ‫And so we have some starter files again 14 00:00:42,750 --> 00:00:45,210 ‫which I have linked in this lecture. 15 00:00:45,210 --> 00:00:48,330 ‫And the starter files are this array 16 00:00:48,330 --> 00:00:50,610 ‫of frequently asked questions 17 00:00:50,610 --> 00:00:53,853 ‫and then also this CSS styles right here. 18 00:00:54,840 --> 00:00:57,300 ‫So as always, you have two options. 19 00:00:57,300 --> 00:01:00,030 ‫You can do it in your own VS code. 20 00:01:00,030 --> 00:01:04,560 ‫So then just go here and copy all the relevant starter data. 21 00:01:04,560 --> 00:01:07,020 ‫Or of course you can fork 22 00:01:07,020 --> 00:01:09,333 ‫now this code sandbox. 23 00:01:10,230 --> 00:01:13,377 ‫So basically in order to create your own one. 24 00:01:13,377 --> 00:01:17,130 ‫And so now I have created a new one out of the other one 25 00:01:17,130 --> 00:01:19,473 ‫and so I can safely change this one. 26 00:01:20,760 --> 00:01:24,270 ‫So let's go back here to see what we have to build. 27 00:01:24,270 --> 00:01:26,160 ‫And basically the entire thing here 28 00:01:26,160 --> 00:01:28,080 ‫is the accordion component 29 00:01:28,080 --> 00:01:31,830 ‫and then each of them is one accordion item. 30 00:01:31,830 --> 00:01:32,760 ‫And so let's start 31 00:01:32,760 --> 00:01:36,180 ‫by actually building these items themselves. 32 00:01:36,180 --> 00:01:39,570 ‫And remember that each one gets a number, 33 00:01:39,570 --> 00:01:41,733 ‫a title, and some text. 34 00:01:44,010 --> 00:01:45,690 ‫So the accordion component 35 00:01:45,690 --> 00:01:48,390 ‫has actually already been created. 36 00:01:48,390 --> 00:01:53,313 ‫And so now next, let's create the accordion item. 37 00:01:57,360 --> 00:01:58,800 ‫Okay. 38 00:01:58,800 --> 00:02:02,970 ‫So remember that each item gets a number. 39 00:02:02,970 --> 00:02:06,600 ‫It gets a title and the text. 40 00:02:06,600 --> 00:02:09,060 ‫And so let's immediately write that here 41 00:02:09,060 --> 00:02:11,520 ‫basically as the props that we will receive. 42 00:02:11,520 --> 00:02:15,210 ‫And so then we can immediately build with these. 43 00:02:15,210 --> 00:02:17,280 ‫So just like before, we will start 44 00:02:17,280 --> 00:02:20,790 ‫by building a static version of the app. 45 00:02:20,790 --> 00:02:23,220 ‫So in this case of these two components. 46 00:02:23,220 --> 00:02:25,200 ‫And then later we add state 47 00:02:25,200 --> 00:02:29,553 ‫to the mix in order to actually make the component dynamic. 48 00:02:30,870 --> 00:02:33,910 ‫So here we will return a div element 49 00:02:35,040 --> 00:02:37,950 ‫and this div has the class name 50 00:02:37,950 --> 00:02:42,153 ‫that's coming from the CSS that I provided of item. 51 00:02:44,700 --> 00:02:47,160 ‫Then we can immediately close that. 52 00:02:47,160 --> 00:02:50,073 ‫And so then we have one paragraph for the number. 53 00:02:51,000 --> 00:02:54,243 ‫So that's class name number. 54 00:02:55,710 --> 00:02:58,720 ‫And then here let's actually immediately use 55 00:03:00,510 --> 00:03:03,780 ‫again this prop that we will receive 56 00:03:03,780 --> 00:03:07,390 ‫as soon as we start including this component here anywhere 57 00:03:08,580 --> 00:03:13,050 ‫but we can already use that prop as if it already existed. 58 00:03:13,050 --> 00:03:17,040 ‫So class name, then let's say text. 59 00:03:17,040 --> 00:03:19,200 ‫And again here the same thing 60 00:03:19,200 --> 00:03:21,483 ‫that's immediately used, the prop. 61 00:03:24,254 --> 00:03:28,267 ‫And then finally this one here for the icon. 62 00:03:31,890 --> 00:03:36,890 ‫And by icon I mean this minus and plus right here. 63 00:03:37,050 --> 00:03:39,870 ‫So see how it toggles between plus and minus. 64 00:03:39,870 --> 00:03:42,810 ‫And for now, let's start with a minus there 65 00:03:42,810 --> 00:03:44,310 ‫but we will change that later. 66 00:03:45,630 --> 00:03:48,000 ‫And finally, we then have a div 67 00:03:48,000 --> 00:03:50,640 ‫which will contain the content itself. 68 00:03:50,640 --> 00:03:52,350 ‫So basically the text. 69 00:03:52,350 --> 00:03:57,070 ‫So here the class name is content box 70 00:03:59,340 --> 00:04:03,030 ‫and then this again is where the actual text goes. 71 00:04:03,030 --> 00:04:05,220 ‫And I see that here I have a mistake 72 00:04:05,220 --> 00:04:07,890 ‫because this is actually for the title 73 00:04:07,890 --> 00:04:11,250 ‫so I'm not sure why I called that text. 74 00:04:11,250 --> 00:04:12,780 ‫So the class. 75 00:04:12,780 --> 00:04:14,133 ‫But yeah, nevermind. 76 00:04:15,810 --> 00:04:16,830 ‫Okay. 77 00:04:16,830 --> 00:04:19,650 ‫And now here in this accordion all we need to do 78 00:04:19,650 --> 00:04:23,790 ‫is to loop over this array of objects like we always do. 79 00:04:23,790 --> 00:04:25,890 ‫And then for each of the objects 80 00:04:25,890 --> 00:04:28,113 ‫we want to render one of these items. 81 00:04:29,160 --> 00:04:31,440 ‫And actually to make this a bit more reusable 82 00:04:31,440 --> 00:04:36,030 ‫let's accept some generic data here basically. 83 00:04:36,030 --> 00:04:37,900 ‫And so then here we pass that data in 84 00:04:39,780 --> 00:04:43,230 ‫and as the data we use DFAQs. 85 00:04:43,230 --> 00:04:45,960 ‫And so then we could reuse the same accordion 86 00:04:45,960 --> 00:04:47,493 ‫with different arrays. 87 00:04:49,626 --> 00:04:53,703 ‫Okay, this one here should have the class name of accordion. 88 00:04:56,580 --> 00:04:59,910 ‫And then here is where the mapping will happen. 89 00:04:59,910 --> 00:05:02,733 ‫So that's data.map. 90 00:05:05,370 --> 00:05:07,320 ‫And then for each of these elements 91 00:05:07,320 --> 00:05:10,230 ‫and we could also call them frequently asked question 92 00:05:10,230 --> 00:05:14,460 ‫but let's just go for the generic element. 93 00:05:14,460 --> 00:05:16,530 ‫And so as we said before 94 00:05:16,530 --> 00:05:20,673 ‫we want to render one accordion item for each of them. 95 00:05:22,110 --> 00:05:24,900 ‫And what do we want to pass in there? 96 00:05:24,900 --> 00:05:29,430 ‫Well, the title will be at element.title 97 00:05:30,840 --> 00:05:32,763 ‫so that's this one here. 98 00:05:34,110 --> 00:05:39,110 ‫And then also the text coming from that same object, 99 00:05:39,990 --> 00:05:43,170 ‫so element.text. 100 00:05:43,170 --> 00:05:45,900 ‫And now we also want the number. 101 00:05:45,900 --> 00:05:47,790 ‫So this one here should automatically be 102 00:05:47,790 --> 00:05:50,643 ‫number one, two and three. 103 00:05:51,870 --> 00:05:54,270 ‫So we can do that very easily 104 00:05:54,270 --> 00:05:58,350 ‫by using the index that is also passed in the map. 105 00:05:58,350 --> 00:06:01,080 ‫And that's very easy to do because the callback here 106 00:06:01,080 --> 00:06:06,080 ‫in the map actually also gets past the current index. 107 00:06:06,120 --> 00:06:08,100 ‫So besides the current element 108 00:06:08,100 --> 00:06:10,170 ‫it also gets the current index. 109 00:06:10,170 --> 00:06:13,443 ‫So as a second argument, so let's call that I. 110 00:06:14,670 --> 00:06:19,670 ‫And so then we can pass in as numb simply I. 111 00:06:21,360 --> 00:06:22,323 ‫And that's it. 112 00:06:24,000 --> 00:06:26,550 ‫All right, so we have something here. 113 00:06:26,550 --> 00:06:29,700 ‫Let's just make this a bit smaller. 114 00:06:29,700 --> 00:06:31,443 ‫Well, not all of it. 115 00:06:33,390 --> 00:06:35,820 ‫Let's maybe close down the side bar. 116 00:06:35,820 --> 00:06:37,173 ‫Yeah, that's a lot better. 117 00:06:38,040 --> 00:06:40,233 ‫We can make it a bit smaller even. 118 00:06:41,160 --> 00:06:42,273 ‫And so let's compare. 119 00:06:43,650 --> 00:06:47,370 ‫So here we actually have like 01 120 00:06:47,370 --> 00:06:50,673 ‫and then also the textile looks a bit different. 121 00:06:51,810 --> 00:06:53,160 ‫So let's see. 122 00:06:53,160 --> 00:06:57,060 ‫But yeah, the class names all look correct 123 00:06:57,060 --> 00:06:59,940 ‫but now let's just quickly take care of the numbers here. 124 00:06:59,940 --> 00:07:03,753 ‫So here we want to have 01, 02, and 03. 125 00:07:04,740 --> 00:07:07,650 ‫So let's do some magic here. 126 00:07:07,650 --> 00:07:11,020 ‫Let's say if the number is less than nine 127 00:07:12,570 --> 00:07:15,610 ‫then here please place a zero 128 00:07:18,420 --> 00:07:19,833 ‫and the number plus one. 129 00:07:20,820 --> 00:07:25,820 ‫But if not, so right here, then it's just number plus one. 130 00:07:27,030 --> 00:07:29,370 ‫Okay, that looks much better. 131 00:07:29,370 --> 00:07:32,040 ‫And then here, let's just change this one to title. 132 00:07:32,040 --> 00:07:33,840 ‫So that should work. 133 00:07:33,840 --> 00:07:38,840 ‫And yeah, and with this let's go back to the original 134 00:07:38,910 --> 00:07:42,870 ‫because now we need to start thinking about state. 135 00:07:42,870 --> 00:07:45,900 ‫So remember how we can open and close 136 00:07:45,900 --> 00:07:48,690 ‫each of these boxes here individually, 137 00:07:48,690 --> 00:07:51,930 ‫which basically means that each of these boxes 138 00:07:51,930 --> 00:07:54,210 ‫holds their own state. 139 00:07:54,210 --> 00:07:59,210 ‫So whenever we click here, you see that the UI changes. 140 00:07:59,610 --> 00:08:01,770 ‫So that's the most fundamental thing 141 00:08:01,770 --> 00:08:05,460 ‫that we need to think about whenever the UI changes. 142 00:08:05,460 --> 00:08:09,750 ‫So whenever there is some update here happening in the UI 143 00:08:09,750 --> 00:08:12,810 ‫it means that we need a piece of state. 144 00:08:12,810 --> 00:08:15,540 ‫Now, each of these items here operates 145 00:08:15,540 --> 00:08:18,900 ‫completely independently from the other ones. 146 00:08:18,900 --> 00:08:21,150 ‫So if I open this one here 147 00:08:21,150 --> 00:08:23,940 ‫nothing happens to the other two. 148 00:08:23,940 --> 00:08:26,670 ‫So I can open all of them at the same time 149 00:08:26,670 --> 00:08:30,750 ‫or I can have all of them close, meaning that 150 00:08:30,750 --> 00:08:34,470 ‫again, each of them really operates in an independent way 151 00:08:34,470 --> 00:08:39,120 ‫which means that each of them must hold their own state. 152 00:08:39,120 --> 00:08:42,630 ‫So again, that's because this one can be open 153 00:08:42,630 --> 00:08:44,490 ‫but this one as well. 154 00:08:44,490 --> 00:08:47,490 ‫And so what that means is that we should now define 155 00:08:47,490 --> 00:08:50,613 ‫a state variable in each of these items. 156 00:08:52,950 --> 00:08:55,260 ‫So that's right here. 157 00:08:55,260 --> 00:08:58,653 ‫And so then we use our friend, we use state. 158 00:08:59,520 --> 00:09:04,300 ‫So let's call our state variable is open, and set is open. 159 00:09:08,040 --> 00:09:12,093 ‫So we use state which was then automatically imported. 160 00:09:13,080 --> 00:09:17,370 ‫So this one right here, make sure you have that. 161 00:09:17,370 --> 00:09:20,790 ‫And then by default it will be fault. 162 00:09:20,790 --> 00:09:23,913 ‫So by default, we want each box to be closed. 163 00:09:25,080 --> 00:09:29,733 ‫So we declared our state variable, and now let's use it. 164 00:09:30,690 --> 00:09:33,810 ‫So that's the same three step process as always. 165 00:09:33,810 --> 00:09:37,620 ‫We define it, we use it, and then we update it. 166 00:09:37,620 --> 00:09:42,210 ‫So basically what we want to do when is open is false. 167 00:09:42,210 --> 00:09:45,270 ‫So when this is closed is to not display 168 00:09:45,270 --> 00:09:47,343 ‫this content box down here. 169 00:09:48,690 --> 00:09:49,650 ‫Or in other words 170 00:09:49,650 --> 00:09:53,220 ‫we want some conditional rendering of this part. 171 00:09:53,220 --> 00:09:55,740 ‫So let's place it into the JavaScript mode 172 00:09:55,740 --> 00:09:58,420 ‫and then let's say is open 173 00:09:59,640 --> 00:10:02,163 ‫and then conditional rendering like this. 174 00:10:03,180 --> 00:10:06,480 ‫Now, in this case here also this should be a plus 175 00:10:06,480 --> 00:10:07,740 ‫not a minus. 176 00:10:07,740 --> 00:10:09,940 ‫And so let's also come here 177 00:10:12,000 --> 00:10:13,570 ‫and say is open 178 00:10:15,930 --> 00:10:18,153 ‫then show the minus, 179 00:10:20,010 --> 00:10:23,673 ‫and if not then please show the plus. 180 00:10:24,960 --> 00:10:26,730 ‫Close the JavaScript mode. 181 00:10:26,730 --> 00:10:29,433 ‫And so with this, we have the pluses showing. 182 00:10:31,080 --> 00:10:34,170 ‫All right, now all we need to happen is that 183 00:10:34,170 --> 00:10:37,443 ‫of course when we click here, the box should actually open. 184 00:10:38,610 --> 00:10:40,590 ‫So you see that with the CSS style 185 00:10:40,590 --> 00:10:44,970 ‫I applied this hint cursor here to the entire div, 186 00:10:44,970 --> 00:10:46,950 ‫so to the entire element. 187 00:10:46,950 --> 00:10:49,530 ‫And so this is where we then want to listen 188 00:10:49,530 --> 00:10:51,120 ‫for the click event. 189 00:10:51,120 --> 00:10:52,833 ‫So right here on this div. 190 00:10:54,030 --> 00:10:55,863 ‫So let's say on click, 191 00:10:57,480 --> 00:10:59,970 ‫and then here we will pass in a function 192 00:10:59,970 --> 00:11:04,170 ‫called handle toggle. 193 00:11:04,170 --> 00:11:07,770 ‫And so let's go define that function. 194 00:11:07,770 --> 00:11:12,060 ‫So just like before, we just define an outside function 195 00:11:12,060 --> 00:11:16,860 ‫with the keywords of handle here, which is totally optional 196 00:11:16,860 --> 00:11:18,690 ‫but it makes it easy to understand 197 00:11:18,690 --> 00:11:20,670 ‫that this is a function that will be used 198 00:11:20,670 --> 00:11:22,440 ‫as an event handler. 199 00:11:22,440 --> 00:11:26,280 ‫And so now here let's use set is open 200 00:11:26,280 --> 00:11:29,460 ‫and then we take the current one. 201 00:11:29,460 --> 00:11:32,790 ‫So we can just call it current if we want. 202 00:11:32,790 --> 00:11:35,970 ‫Of course we can also call it is open. 203 00:11:35,970 --> 00:11:37,440 ‫Yeah, anything works. 204 00:11:37,440 --> 00:11:39,543 ‫And then we just want to do the opposite. 205 00:11:42,390 --> 00:11:47,390 ‫Alright, so that didn't work yet. 206 00:11:48,420 --> 00:11:52,200 ‫Maybe let's just reload here, that is sometimes necessary. 207 00:11:52,200 --> 00:11:55,890 ‫And yes, that works. 208 00:11:55,890 --> 00:12:00,450 ‫And if I close again, it closes, beautiful. 209 00:12:00,450 --> 00:12:02,370 ‫Now here we have some errors 210 00:12:02,370 --> 00:12:05,670 ‫and that's just because of the key prop. 211 00:12:05,670 --> 00:12:08,640 ‫So here we need to pass in a unique key prop 212 00:12:08,640 --> 00:12:13,410 ‫and we could now actually use I, which is unique actually. 213 00:12:13,410 --> 00:12:18,410 ‫So it's this 01 and two coming from the array iteration. 214 00:12:18,660 --> 00:12:22,230 ‫But it's better to not rely on that 215 00:12:22,230 --> 00:12:25,650 ‫and instead use something that's truly unique. 216 00:12:25,650 --> 00:12:28,803 ‫So that's for example, the title of each element. 217 00:12:31,500 --> 00:12:36,500 ‫Close this one here, and indeed it works on all of them. 218 00:12:37,980 --> 00:12:40,470 ‫There's just one small detail missing 219 00:12:40,470 --> 00:12:44,070 ‫which is that when this is open, 220 00:12:44,070 --> 00:12:46,200 ‫we get this green border here 221 00:12:46,200 --> 00:12:48,510 ‫and all the text becomes green. 222 00:12:48,510 --> 00:12:51,810 ‫So that's just one special class that gets added 223 00:12:51,810 --> 00:12:54,243 ‫to the item whenever it is open. 224 00:12:56,670 --> 00:12:59,163 ‫So on the item that's right here. 225 00:13:00,390 --> 00:13:03,330 ‫So again we want to add a second class here 226 00:13:03,330 --> 00:13:05,400 ‫in case that it is open. 227 00:13:05,400 --> 00:13:08,790 ‫And so for that we need some more conditional 228 00:13:08,790 --> 00:13:12,330 ‫rendering basically, in this case of classes. 229 00:13:12,330 --> 00:13:16,650 ‫So here we now need to construct a template string 230 00:13:16,650 --> 00:13:21,330 ‫or a template literal, which already has the item string 231 00:13:21,330 --> 00:13:23,670 ‫and then here based on a condition, 232 00:13:23,670 --> 00:13:25,500 ‫so based on it's open 233 00:13:25,500 --> 00:13:30,423 ‫we either want to add open or nothing. 234 00:13:31,500 --> 00:13:32,373 ‫And that's it. 235 00:13:33,450 --> 00:13:35,340 ‫And that works. 236 00:13:35,340 --> 00:13:39,420 ‫Well this kind of didn't become green for some reason. 237 00:13:39,420 --> 00:13:42,363 ‫Let's check out our CSS here maybe. 238 00:13:44,400 --> 00:13:48,033 ‫Maybe there's something that I didn't do right. 239 00:13:49,770 --> 00:13:52,893 ‫Yeah, so here it should be title. 240 00:13:54,600 --> 00:13:56,043 ‫Yes, beautiful. 241 00:13:57,420 --> 00:14:00,750 ‫And with this, we actually finished this accordion 242 00:14:00,750 --> 00:14:01,743 ‫at least for now. 243 00:14:02,610 --> 00:14:05,070 ‫So later in this section there is the second part 244 00:14:05,070 --> 00:14:09,060 ‫of this exercise where we will make it a bit more realistic 245 00:14:09,060 --> 00:14:11,070 ‫where only one of these three 246 00:14:11,070 --> 00:14:12,813 ‫can be opened at the same time.