1 00:00:01,050 --> 00:00:02,520 ‫From my experience, 2 00:00:02,520 --> 00:00:07,520 ‫it's not super hard to understand how state works in React. 3 00:00:07,620 --> 00:00:10,320 ‫But it can actually be quite tricky 4 00:00:10,320 --> 00:00:12,570 ‫to understand how exactly to use it 5 00:00:12,570 --> 00:00:15,450 ‫in practice in different situations. 6 00:00:15,450 --> 00:00:19,470 ‫But the thing is, that this is the number one skill 7 00:00:19,470 --> 00:00:22,170 ‫that you need to have as a React developer. 8 00:00:22,170 --> 00:00:26,940 ‫And that's why I decided to create this extra exercise 9 00:00:26,940 --> 00:00:28,860 ‫that we're going to build together now 10 00:00:28,860 --> 00:00:30,750 ‫to give you more situations 11 00:00:30,750 --> 00:00:33,720 ‫and more opportunities to practice. 12 00:00:33,720 --> 00:00:35,433 ‫So let's go. 13 00:00:36,750 --> 00:00:40,050 ‫And here is the exercise that we're going to build. 14 00:00:40,050 --> 00:00:42,780 ‫And it's actually a small project even. 15 00:00:42,780 --> 00:00:45,480 ‫So this is a flashcard project 16 00:00:45,480 --> 00:00:49,440 ‫where a flashcard is basically a question on one side 17 00:00:49,440 --> 00:00:50,760 ‫and then, when you click it, 18 00:00:50,760 --> 00:00:53,250 ‫you get the answer on the other side. 19 00:00:53,250 --> 00:00:57,300 ‫So imagine that you can rotate each of these cards here, 20 00:00:57,300 --> 00:01:00,393 ‫which is what many people use to study. 21 00:01:01,260 --> 00:01:02,940 ‫So if I click here now again, 22 00:01:02,940 --> 00:01:06,240 ‫then it'll basically turn the card around again. 23 00:01:06,240 --> 00:01:08,730 ‫If I click here, then it opens this one. 24 00:01:08,730 --> 00:01:11,880 ‫And while this is open and I click on another one, 25 00:01:11,880 --> 00:01:14,673 ‫then you see that one closes and this one opens. 26 00:01:15,630 --> 00:01:16,620 ‫All right. 27 00:01:16,620 --> 00:01:19,740 ‫So this is gonna be a small, fun exercise 28 00:01:19,740 --> 00:01:23,190 ‫which maybe looks very complex to you right now, 29 00:01:23,190 --> 00:01:26,550 ‫but actually all we need is one piece of state 30 00:01:26,550 --> 00:01:28,530 ‫to control all of this. 31 00:01:28,530 --> 00:01:32,670 ‫Now I added a starter file to the link of this lecture. 32 00:01:32,670 --> 00:01:35,310 ‫So that's this code sandbox here. 33 00:01:35,310 --> 00:01:39,630 ‫And so here we already have an array with all the questions. 34 00:01:39,630 --> 00:01:43,023 ‫And once again, that's an array of objects. 35 00:01:44,220 --> 00:01:45,053 ‫All right. 36 00:01:45,053 --> 00:01:46,200 ‫And so what we're going to build 37 00:01:46,200 --> 00:01:48,840 ‫is this flashcards right here. 38 00:01:48,840 --> 00:01:53,130 ‫So all you have to do is to fork now with this code sandbox 39 00:01:53,130 --> 00:01:56,970 ‫or you can just also copy paste this entire code 40 00:01:56,970 --> 00:02:00,510 ‫into your own code editor on your computer. 41 00:02:00,510 --> 00:02:02,100 ‫So that's your choice. 42 00:02:02,100 --> 00:02:04,530 ‫But what I will do is to now fork this, 43 00:02:04,530 --> 00:02:08,493 ‫which will basically create a copy in my own code sandbox. 44 00:02:09,870 --> 00:02:10,703 ‫All right. 45 00:02:10,703 --> 00:02:13,020 ‫And so let's get started. 46 00:02:13,020 --> 00:02:15,810 ‫And the first part is to actually render out 47 00:02:15,810 --> 00:02:19,530 ‫these different flashcards like this. 48 00:02:19,530 --> 00:02:21,690 ‫So basically only the front part 49 00:02:21,690 --> 00:02:24,450 ‫which contains all the questions. 50 00:02:24,450 --> 00:02:26,970 ‫So you'll see that each one has an idea, 51 00:02:26,970 --> 00:02:29,160 ‫a question, and an answer. 52 00:02:29,160 --> 00:02:32,373 ‫But of course, by default, only the questions are visible. 53 00:02:34,140 --> 00:02:36,843 ‫So we already know how to render lists. 54 00:02:37,800 --> 00:02:39,630 ‫We just enter JavaScript mode, 55 00:02:39,630 --> 00:02:44,460 ‫then we take our questions array and map over it. 56 00:02:44,460 --> 00:02:46,713 ‫So each of them is a question. 57 00:02:48,030 --> 00:02:50,910 ‫And then here we can render some JSX. 58 00:02:50,910 --> 00:02:52,680 ‫Now, many times what we do here 59 00:02:52,680 --> 00:02:54,840 ‫is to create an extra component. 60 00:02:54,840 --> 00:02:58,470 ‫So just like we did in the far away travel list app 61 00:02:58,470 --> 00:03:01,560 ‫that we're currently building, but we don't have to. 62 00:03:01,560 --> 00:03:05,520 ‫So we can also just return some JSX here. 63 00:03:05,520 --> 00:03:07,860 ‫And so that's what we're going to do now. 64 00:03:07,860 --> 00:03:09,333 ‫So just another div. 65 00:03:10,890 --> 00:03:15,630 ‫And then in there a paragraph with the question. 66 00:03:15,630 --> 00:03:20,630 ‫So that's question.question actually, and that's all. 67 00:03:22,260 --> 00:03:26,163 ‫Close that and close the div as well. 68 00:03:27,360 --> 00:03:29,910 ‫And there we have it. 69 00:03:29,910 --> 00:03:33,360 ‫Now what's missing here, is the class name of... 70 00:03:39,780 --> 00:03:41,280 ‫flashcards. 71 00:03:41,280 --> 00:03:45,060 ‫So as you see, I already created some CSS. 72 00:03:45,060 --> 00:03:48,720 ‫So if you copy the code into your own computer, 73 00:03:48,720 --> 00:03:53,720 ‫then make sure to also copy the contents of this style.css. 74 00:03:57,720 --> 00:04:00,480 ‫Okay, now we see that here we have some problems 75 00:04:00,480 --> 00:04:03,270 ‫which are related to the key. 76 00:04:03,270 --> 00:04:06,300 ‫Exactly, so each one needs a unique key. 77 00:04:06,300 --> 00:04:09,273 ‫And so, well, we can just put that here. 78 00:04:11,310 --> 00:04:14,850 ‫So key, and then let's use question.id 79 00:04:14,850 --> 00:04:16,950 ‫because these are unique values, 80 00:04:16,950 --> 00:04:19,680 ‫and as you know, each element that we render here 81 00:04:19,680 --> 00:04:23,673 ‫inside the map, so as a list, needs a unique key. 82 00:04:24,570 --> 00:04:27,873 ‫So if I reload now, then these errors will be gone. 83 00:04:28,860 --> 00:04:32,910 ‫Okay, so we have now our static parts all built out. 84 00:04:32,910 --> 00:04:35,430 ‫Now what we need to do is something to happen 85 00:04:35,430 --> 00:04:38,670 ‫whenever we click on one of these components here, 86 00:04:38,670 --> 00:04:41,520 ‫or actually, each of these elements. 87 00:04:41,520 --> 00:04:44,220 ‫So how are we going to do this? 88 00:04:44,220 --> 00:04:46,410 ‫Well, as I said initially, 89 00:04:46,410 --> 00:04:49,620 ‫all we need is actually one piece of state 90 00:04:49,620 --> 00:04:52,110 ‫and that piece of state will keep track 91 00:04:52,110 --> 00:04:56,460 ‫of which question ID is currently the active question. 92 00:04:56,460 --> 00:04:59,793 ‫And if that sounds confusing, then let's just write a code. 93 00:05:01,260 --> 00:05:06,260 ‫So let's call this the selected ID 94 00:05:07,410 --> 00:05:08,560 ‫and then setSelectedId. 95 00:05:12,240 --> 00:05:13,073 ‫useState. 96 00:05:14,400 --> 00:05:18,390 ‫And then, here we will want to start with null, 97 00:05:18,390 --> 00:05:21,180 ‫because by default we want none of the questions 98 00:05:21,180 --> 00:05:23,040 ‫to be open in the beginning, 99 00:05:23,040 --> 00:05:25,590 ‫so to be selected in the beginning. 100 00:05:25,590 --> 00:05:27,270 ‫And so that's what null is for. 101 00:05:27,270 --> 00:05:30,393 ‫So null is basically just nothing. 102 00:05:32,190 --> 00:05:35,780 ‫So now here we need to import useState from React. 103 00:05:43,080 --> 00:05:44,103 ‫All right. 104 00:05:47,190 --> 00:05:50,820 ‫And now let's remember the three steps of using state, 105 00:05:50,820 --> 00:05:52,860 ‫which I like to always come back to 106 00:05:52,860 --> 00:05:55,560 ‫because I think this makes it a bit more helpful 107 00:05:55,560 --> 00:05:57,993 ‫to understand how we should approach this. 108 00:05:59,040 --> 00:06:01,980 ‫So the first step is to define the state variable, 109 00:06:01,980 --> 00:06:03,330 ‫which we already did. 110 00:06:03,330 --> 00:06:06,480 ‫Second is to then use that state variable, 111 00:06:06,480 --> 00:06:08,670 ‫and third is to update it. 112 00:06:08,670 --> 00:06:12,360 ‫So as for the second point, let's now do that. 113 00:06:12,360 --> 00:06:16,800 ‫So let's use the selected ID here for something. 114 00:06:16,800 --> 00:06:20,970 ‫But well this time this is a bit tricky, right? 115 00:06:20,970 --> 00:06:25,470 ‫Like what do we actually need the selected ID for? 116 00:06:25,470 --> 00:06:28,200 ‫Well let's maybe make it easier 117 00:06:28,200 --> 00:06:33,200 ‫by instead of using null here, using one of these. 118 00:06:33,300 --> 00:06:35,280 ‫So one of the actual IDs. 119 00:06:35,280 --> 00:06:36,240 ‫So 9103. 120 00:06:38,550 --> 00:06:41,220 ‫So if this is the state. 121 00:06:41,220 --> 00:06:46,220 ‫So let's imagine that we just clicked on this one here, 122 00:06:46,440 --> 00:06:48,240 ‫how to give components memory. 123 00:06:48,240 --> 00:06:49,890 ‫Let's say that we just clicked here 124 00:06:49,890 --> 00:06:51,990 ‫and so that this is then the state. 125 00:06:51,990 --> 00:06:54,093 ‫So how do we want to use this state? 126 00:06:55,050 --> 00:06:59,550 ‫Well basically here, instead of displaying the question, 127 00:06:59,550 --> 00:07:02,310 ‫we want to display the answer. 128 00:07:02,310 --> 00:07:04,650 ‫So we can do that. 129 00:07:04,650 --> 00:07:09,650 ‫We can say question.id equals the selectedId 130 00:07:11,910 --> 00:07:16,910 ‫and if it is, display question.answer. 131 00:07:17,460 --> 00:07:22,200 ‫And if not, well then of course the question.question. 132 00:07:22,200 --> 00:07:26,133 ‫And so now here, we actually this time got the answer. 133 00:07:27,060 --> 00:07:28,623 ‫So that's the useState hook. 134 00:07:30,750 --> 00:07:33,243 ‫And so that's already working. 135 00:07:34,170 --> 00:07:38,580 ‫So let's do the same thing for the styling because here, 136 00:07:38,580 --> 00:07:42,930 ‫actually this gets like with this red background 137 00:07:42,930 --> 00:07:46,110 ‫and so we can use a class that I created for that 138 00:07:46,110 --> 00:07:47,913 ‫and edit here to this div. 139 00:07:49,140 --> 00:07:51,063 ‫So let's do something similar then. 140 00:07:52,290 --> 00:07:56,940 ‫So className, enter JavaScript mode, 141 00:07:56,940 --> 00:07:59,370 ‫and then we do the same thing. 142 00:07:59,370 --> 00:08:04,240 ‫So if the current question.id is equal to the selectedId 143 00:08:05,160 --> 00:08:09,543 ‫then here the class name should be selected. 144 00:08:10,950 --> 00:08:13,110 ‫And if not, then nothing. 145 00:08:13,110 --> 00:08:14,820 ‫And there we go. 146 00:08:14,820 --> 00:08:16,173 ‫So beautiful. 147 00:08:17,370 --> 00:08:19,800 ‫Just make sure that you actually understand 148 00:08:19,800 --> 00:08:21,750 ‫what is going on here. 149 00:08:21,750 --> 00:08:24,420 ‫So as we loop over this array here, 150 00:08:24,420 --> 00:08:28,950 ‫each of these elements is one of these divs, right? 151 00:08:28,950 --> 00:08:31,440 ‫And in each of these divs we have access 152 00:08:31,440 --> 00:08:34,230 ‫to the current question object, 153 00:08:34,230 --> 00:08:38,056 ‫and then each of them has one ID. 154 00:08:38,056 --> 00:08:41,550 ‫And so what we can then do is to compare that ID 155 00:08:41,550 --> 00:08:43,830 ‫with the selected ID. 156 00:08:43,830 --> 00:08:46,680 ‫So the one that we have currently selected. 157 00:08:46,680 --> 00:08:50,034 ‫And if that is the same, then well it's just what 158 00:08:50,034 --> 00:08:51,720 ‫we have written here. 159 00:08:51,720 --> 00:08:54,390 ‫So if it is the selected question, 160 00:08:54,390 --> 00:08:57,810 ‫so if the selected ID is equal to the one 161 00:08:57,810 --> 00:09:01,650 ‫that is in the object, then simply display the answer. 162 00:09:01,650 --> 00:09:04,440 ‫And otherwise, in all other cases, 163 00:09:04,440 --> 00:09:07,260 ‫well then display the question itself. 164 00:09:07,260 --> 00:09:08,493 ‫So not the answer. 165 00:09:10,320 --> 00:09:11,340 ‫All right. 166 00:09:11,340 --> 00:09:14,490 ‫And now, let's set it back to null. 167 00:09:14,490 --> 00:09:17,610 ‫And now, all we have to do is to set the state. 168 00:09:17,610 --> 00:09:18,963 ‫So that's the third step. 169 00:09:20,190 --> 00:09:23,610 ‫So when do we want to update the state? 170 00:09:23,610 --> 00:09:25,500 ‫It's whenever we click here, 171 00:09:25,500 --> 00:09:27,150 ‫so in one of these divs. 172 00:09:27,150 --> 00:09:31,290 ‫And so that's where we place the onClick handler. 173 00:09:31,290 --> 00:09:33,960 ‫So as you see,it doesn't even have to be a button 174 00:09:33,960 --> 00:09:35,970 ‫or anything like that. 175 00:09:35,970 --> 00:09:39,090 ‫Okay? And now what we are going to do is to 176 00:09:39,090 --> 00:09:40,893 ‫create a function here. 177 00:09:42,390 --> 00:09:44,853 ‫Just to make our code a bit easier to understand. 178 00:09:45,930 --> 00:09:48,033 ‫So let's call it handle click. 179 00:09:50,070 --> 00:09:52,563 ‫So for now just the name of the function. 180 00:09:53,670 --> 00:09:57,460 ‫So here we need to now then pass in that function 181 00:09:59,178 --> 00:10:01,470 ‫right? However, that is not really enough 182 00:10:01,470 --> 00:10:06,470 ‫because well, here we will now call set selected ID, 183 00:10:08,310 --> 00:10:09,840 ‫but as the name says 184 00:10:09,840 --> 00:10:12,450 ‫we now actually need the ID of the question that 185 00:10:12,450 --> 00:10:15,870 ‫should become the selected question, right? 186 00:10:15,870 --> 00:10:18,600 ‫And so what this means is that this function 187 00:10:18,600 --> 00:10:23,600 ‫needs to receive that ID so that we can then set it here. 188 00:10:25,320 --> 00:10:28,650 ‫So now we need to call this handle click function. 189 00:10:28,650 --> 00:10:29,853 ‫With that I'd. 190 00:10:32,280 --> 00:10:36,180 ‫So simply enough question.id. 191 00:10:36,180 --> 00:10:38,700 ‫But don't make the mistake of thinking 192 00:10:38,700 --> 00:10:40,290 ‫that this is finished. 193 00:10:40,290 --> 00:10:44,070 ‫And actually React already gave us here an error. 194 00:10:44,070 --> 00:10:46,260 ‫So remember that here we need to pass 195 00:10:46,260 --> 00:10:49,590 ‫in an actual function and not a function call 196 00:10:49,590 --> 00:10:51,060 ‫like we have here. 197 00:10:51,060 --> 00:10:54,900 ‫So this is calling handle, click immediately. 198 00:10:54,900 --> 00:10:56,640 ‫That's not what we want. 199 00:10:56,640 --> 00:10:59,880 ‫We want to pass in a function so that React can 200 00:10:59,880 --> 00:11:02,973 ‫then call the function as soon as the event happens. 201 00:11:05,160 --> 00:11:08,733 ‫And test should already be enough, at least for now. 202 00:11:09,870 --> 00:11:12,783 ‫So that worked great! 203 00:11:14,250 --> 00:11:17,220 ‫And as I click on another one, then of course this one 204 00:11:17,220 --> 00:11:19,080 ‫becomes the active one. 205 00:11:19,080 --> 00:11:21,600 ‫And let's check out the React dev tools 206 00:11:21,600 --> 00:11:24,210 ‫because Code Sandbox actually also 207 00:11:24,210 --> 00:11:26,133 ‫has the React tools integrated. 208 00:11:27,660 --> 00:11:31,860 ‫So when we come here to the app, or actually flashcards, 209 00:11:31,860 --> 00:11:35,910 ‫notice that the state is now 9103, 210 00:11:35,910 --> 00:11:38,280 ‫which is exactly this idea. 211 00:11:38,280 --> 00:11:40,323 ‫When we click here, it becomes, 212 00:11:42,240 --> 00:11:44,460 ‫That should've updated, 213 00:11:44,460 --> 00:11:47,490 ‫but apparently it doesn't work that great. 214 00:11:47,490 --> 00:11:48,530 ‫So yeah, well maybe, nevermind, 215 00:11:48,530 --> 00:11:51,930 ‫let's just close this down again. 216 00:11:51,930 --> 00:11:55,830 ‫What matters is that it is working at least kind of 217 00:11:55,830 --> 00:11:58,983 ‫because watch what happens when I click here again. 218 00:12:00,120 --> 00:12:04,230 ‫So nothing happens, of course, because, well 219 00:12:04,230 --> 00:12:07,467 ‫because here we are simply passing in that id 220 00:12:07,467 --> 00:12:11,790 ‫and then we are setting that ID as the selected ID. 221 00:12:11,790 --> 00:12:13,500 ‫So just as expected. 222 00:12:13,500 --> 00:12:15,720 ‫But as we see here, as we click again 223 00:12:15,720 --> 00:12:18,483 ‫it actually closes the card again. 224 00:12:19,650 --> 00:12:22,140 ‫So this functionality we already have of 225 00:12:22,140 --> 00:12:23,520 ‫changing between cards 226 00:12:23,520 --> 00:12:26,643 ‫but when we click on it that we don't have yet. 227 00:12:27,510 --> 00:12:29,490 ‫So let's do that. 228 00:12:29,490 --> 00:12:31,500 ‫And it's not too hard. 229 00:12:31,500 --> 00:12:35,460 ‫Basically what we want to do here is to set this ID 230 00:12:35,460 --> 00:12:36,633 ‫based on a condition. 231 00:12:37,680 --> 00:12:40,620 ‫So we want to say if the question ID 232 00:12:40,620 --> 00:12:44,080 ‫is different from the currently selected one 233 00:12:46,170 --> 00:12:50,280 ‫then the result here should be the id. 234 00:12:50,280 --> 00:12:54,067 ‫And if not, well then set it back to now. 235 00:12:55,853 --> 00:12:57,810 ‫Now here there's some problem. 236 00:12:57,810 --> 00:13:00,033 ‫Ah, yeah, I have one equal too much. 237 00:13:01,470 --> 00:13:02,520 ‫All right. 238 00:13:02,520 --> 00:13:06,390 ‫So again, if the question ID is different 239 00:13:06,390 --> 00:13:10,110 ‫from the already selected ID, then set the ID. 240 00:13:10,110 --> 00:13:13,950 ‫And so that's exactly this behavior, right? 241 00:13:13,950 --> 00:13:17,040 ‫But if not, so basically if the question ID 242 00:13:17,040 --> 00:13:19,860 ‫is already equal to the selected ID 243 00:13:19,860 --> 00:13:21,510 ‫then set it back to null. 244 00:13:21,510 --> 00:13:25,080 ‫And so with null, then none of them will be active. 245 00:13:25,080 --> 00:13:30,080 ‫And yeah, that works and I think it makes sense as well. 246 00:13:32,460 --> 00:13:35,460 ‫So this usage of state here was quite a 247 00:13:35,460 --> 00:13:37,830 ‫bit different from what we had before. 248 00:13:37,830 --> 00:13:40,110 ‫And so that's why I decided again 249 00:13:40,110 --> 00:13:44,460 ‫to include this exercise here by the end of this section. 250 00:13:44,460 --> 00:13:48,027 ‫So please make sure to study exactly what is happening here. 251 00:13:48,027 --> 00:13:50,670 ‫And then after that, I think you are ready 252 00:13:50,670 --> 00:13:53,733 ‫for the final coding challenge of this section.