1 00:00:01,140 --> 00:00:03,840 ‫Now in order to make our form work 2 00:00:03,840 --> 00:00:06,960 ‫the first thing that we need to do is to add the ability 3 00:00:06,960 --> 00:00:09,363 ‫of the user selecting a friend. 4 00:00:10,740 --> 00:00:13,210 ‫So whenever we click here on select, 5 00:00:13,210 --> 00:00:15,570 ‫it'll then open up the form 6 00:00:15,570 --> 00:00:18,720 ‫with the information about this user. 7 00:00:18,720 --> 00:00:21,390 ‫So here is the name of the user 8 00:00:21,390 --> 00:00:24,360 ‫and yeah well that's really all that we need. 9 00:00:24,360 --> 00:00:26,010 ‫And then here you also see 10 00:00:26,010 --> 00:00:28,680 ‫that the selected friend is marked here 11 00:00:28,680 --> 00:00:31,740 ‫with this orange background and button text 12 00:00:31,740 --> 00:00:33,180 ‫changes to close. 13 00:00:33,180 --> 00:00:35,250 ‫And then if we click on another one 14 00:00:35,250 --> 00:00:39,180 ‫then the information of this friend is passed in here. 15 00:00:39,180 --> 00:00:43,260 ‫So basically what we want is that whenever we click select 16 00:00:43,260 --> 00:00:46,740 ‫on one of the friends here in this list component 17 00:00:46,740 --> 00:00:49,980 ‫we want that information to pass here 18 00:00:49,980 --> 00:00:52,320 ‫into this form component. 19 00:00:52,320 --> 00:00:54,510 ‫So how do we do that? 20 00:00:54,510 --> 00:00:58,620 ‫Well, basically we want this component right here. 21 00:00:58,620 --> 00:01:02,730 ‫So this friend component, we wanted to communicate 22 00:01:02,730 --> 00:01:05,160 ‫with this form component, right? 23 00:01:05,160 --> 00:01:08,220 ‫So to basically pass it some data. 24 00:01:08,220 --> 00:01:12,630 ‫But as we can see here in our own componentry 25 00:01:12,630 --> 00:01:14,860 ‫those are actually sibling components 26 00:01:19,440 --> 00:01:22,170 ‫and actually even worse than sibling components 27 00:01:22,170 --> 00:01:25,440 ‫because the friends are inside the friend list 28 00:01:25,440 --> 00:01:28,590 ‫and friend list itself is then a sibling component 29 00:01:28,590 --> 00:01:30,120 ‫of the form. 30 00:01:30,120 --> 00:01:33,450 ‫But in any case, since these two now need to 31 00:01:33,450 --> 00:01:35,160 ‫share some state, 32 00:01:35,160 --> 00:01:38,940 ‫so basically they need to share this friend object 33 00:01:38,940 --> 00:01:40,530 ‫that was selected here. 34 00:01:40,530 --> 00:01:44,040 ‫We need again some lifted up state. 35 00:01:44,040 --> 00:01:48,900 ‫And so the first common parent is again the app component. 36 00:01:48,900 --> 00:01:51,660 ‫And so let's in here create a new piece 37 00:01:51,660 --> 00:01:53,793 ‫of state called selected friend. 38 00:01:58,352 --> 00:02:00,769 ‫And then set selected friend. 39 00:02:02,850 --> 00:02:06,870 ‫And here by default we will have null. 40 00:02:06,870 --> 00:02:09,240 ‫So basically no object at all 41 00:02:09,240 --> 00:02:12,420 ‫which means that no friend is selected. 42 00:02:12,420 --> 00:02:16,890 ‫And now let's start using this new piece of state here 43 00:02:16,890 --> 00:02:19,440 ‫because when there is no friend selected 44 00:02:19,440 --> 00:02:22,440 ‫which is currently the case, since this is null 45 00:02:22,440 --> 00:02:26,790 ‫then we don't even want this form here to show up, right? 46 00:02:26,790 --> 00:02:29,760 ‫So let's go here into our JSX 47 00:02:29,760 --> 00:02:33,450 ‫and let's conditionally render this form. 48 00:02:33,450 --> 00:02:35,580 ‫So based off the state 49 00:02:35,580 --> 00:02:40,560 ‫let's say selected friend and tender form. 50 00:02:40,560 --> 00:02:43,530 ‫So right now selected friend is null 51 00:02:43,530 --> 00:02:46,470 ‫and so the end operator will short circuit 52 00:02:46,470 --> 00:02:47,970 ‫and will not display anything. 53 00:02:49,290 --> 00:02:51,123 ‫And so then it's gone. 54 00:02:53,280 --> 00:02:55,770 ‫Great, so we created the state 55 00:02:55,770 --> 00:02:57,900 ‫we used it already a little bit 56 00:02:57,900 --> 00:03:00,630 ‫and now we need a way of updating it. 57 00:03:00,630 --> 00:03:03,630 ‫And so that of course is going to happen whenever 58 00:03:03,630 --> 00:03:05,073 ‫this button here is clicked. 59 00:03:06,480 --> 00:03:11,190 ‫So let's actually create a handler function again right here 60 00:03:11,190 --> 00:03:14,013 ‫in the component that actually owns that state. 61 00:03:16,230 --> 00:03:19,410 ‫So a function that we will then pass down via props 62 00:03:19,410 --> 00:03:23,580 ‫as we have been doing also with the other functions. 63 00:03:23,580 --> 00:03:28,580 ‫So let's call this one handle the selection. 64 00:03:28,980 --> 00:03:32,373 ‫And so this one should receive a friend object. 65 00:03:34,530 --> 00:03:39,010 ‫So all this we'll do is to set the selected friend 66 00:03:40,230 --> 00:03:43,023 ‫to different object that it will receive. 67 00:03:44,220 --> 00:03:46,890 ‫All right, and so this is the function that will get 68 00:03:46,890 --> 00:03:49,920 ‫called whenever we click on this button. 69 00:03:49,920 --> 00:03:52,050 ‫And so then whatever button is clicked 70 00:03:52,050 --> 00:03:55,020 ‫the associated friend object will be set 71 00:03:55,020 --> 00:03:57,513 ‫as the currently selected friend. 72 00:03:58,950 --> 00:04:01,980 ‫Alright, so let's pass that down. 73 00:04:01,980 --> 00:04:04,530 ‫And here this is getting a bit confusing. 74 00:04:04,530 --> 00:04:07,860 ‫Let's just add some spacing between all of these. 75 00:04:07,860 --> 00:04:09,483 ‫And so let's pass, 76 00:04:10,380 --> 00:04:11,830 ‫let's say on selection 77 00:04:13,020 --> 00:04:17,517 ‫will be handled with handle selection. 78 00:04:19,320 --> 00:04:22,593 ‫Okay, and now in the friend list we need to receive that, 79 00:04:24,210 --> 00:04:29,070 ‫so on selection but it is actually not even this component 80 00:04:29,070 --> 00:04:30,300 ‫that needs this 81 00:04:30,300 --> 00:04:31,860 ‫but the friend itself. 82 00:04:31,860 --> 00:04:36,690 ‫So here we can just pass it through this component by saying 83 00:04:36,690 --> 00:04:41,690 ‫on selection as a new prop here should then be passed here 84 00:04:42,750 --> 00:04:43,593 ‫into the friend. 85 00:04:45,660 --> 00:04:48,900 ‫All right, and so now this is where 86 00:04:48,900 --> 00:04:50,253 ‫we will use this function. 87 00:04:52,260 --> 00:04:54,423 ‫So that's right here on this button. 88 00:04:55,440 --> 00:04:58,290 ‫So on click and then let's specify 89 00:04:58,290 --> 00:05:02,370 ‫or function here because we want to call now, 90 00:05:02,370 --> 00:05:03,573 ‫well not this. 91 00:05:05,220 --> 00:05:08,080 ‫So we want to call on selection 92 00:05:09,210 --> 00:05:11,943 ‫and pass in the current friend. 93 00:05:13,230 --> 00:05:14,063 ‫And that's it. 94 00:05:15,000 --> 00:05:18,600 ‫So whatever button here is now going to be clicked 95 00:05:18,600 --> 00:05:20,430 ‫it'll take the current friend 96 00:05:20,430 --> 00:05:24,423 ‫and it'll save it into the selected friend state. 97 00:05:27,240 --> 00:05:31,350 ‫So that's the same logic as before with some lifted upstate. 98 00:05:31,350 --> 00:05:35,700 ‫Then we create a handler function which updates that state 99 00:05:35,700 --> 00:05:39,330 ‫and then we pass that handler function down via props. 100 00:05:39,330 --> 00:05:40,980 ‫And so now when we click here 101 00:05:40,980 --> 00:05:44,490 ‫that should actually immediately open up the form 102 00:05:44,490 --> 00:05:47,040 ‫and indeed it does. 103 00:05:47,040 --> 00:05:50,610 ‫Alright, now there's still some things missing 104 00:05:50,610 --> 00:05:52,710 ‫but this is already great. 105 00:05:52,710 --> 00:05:55,140 ‫Now what we need to do next is to then actually 106 00:05:55,140 --> 00:05:59,130 ‫pass debt selected friend object here into the form 107 00:05:59,130 --> 00:06:02,253 ‫so that then here we can display the correct name. 108 00:06:03,120 --> 00:06:06,183 ‫So that doesn't sound too difficult. 109 00:06:07,170 --> 00:06:09,330 ‫And so it's right here. 110 00:06:09,330 --> 00:06:14,330 ‫So selected friend should be equal to selected friend. 111 00:06:17,250 --> 00:06:18,753 ‫Then let's come down here, 112 00:06:23,700 --> 00:06:26,730 ‫let's receive that selected friend 113 00:06:26,730 --> 00:06:28,833 ‫and then we can use that here. 114 00:06:29,940 --> 00:06:32,290 ‫So selected friend dot name 115 00:06:33,990 --> 00:06:36,990 ‫and immediately you see Sarah there. 116 00:06:36,990 --> 00:06:38,433 ‫So that's great. 117 00:06:39,420 --> 00:06:42,720 ‫Let's just use it here in the other places. 118 00:06:42,720 --> 00:06:46,803 ‫So that's right here and right here. 119 00:06:49,920 --> 00:06:54,360 ‫Nice, and if we click another one, watch what happens. 120 00:06:54,360 --> 00:06:58,770 ‫Yes, it changes to Anthony or to Clark 121 00:06:58,770 --> 00:07:02,640 ‫or whatever other friends that we have in our list. 122 00:07:02,640 --> 00:07:05,220 ‫Beautiful, so that's working already. 123 00:07:05,220 --> 00:07:06,420 ‫Really nice. 124 00:07:06,420 --> 00:07:10,890 ‫Now the next step is to then basically mark this one here 125 00:07:10,890 --> 00:07:15,270 ‫also as selected and changed the button text here to close. 126 00:07:15,270 --> 00:07:17,010 ‫So just as we have here, 127 00:07:17,010 --> 00:07:20,310 ‫so you see that here we have this nice background 128 00:07:20,310 --> 00:07:23,580 ‫and here the text has changed as well. 129 00:07:23,580 --> 00:07:25,560 ‫So how do we know inside 130 00:07:25,560 --> 00:07:28,503 ‫of each friend if it is currently selected? 131 00:07:29,670 --> 00:07:30,960 ‫Well first of all 132 00:07:30,960 --> 00:07:34,200 ‫we will have to pass in the currently selected friend. 133 00:07:34,200 --> 00:07:37,800 ‫And so then we can compare that with each friend. 134 00:07:37,800 --> 00:07:39,960 ‫So with the friend itself 135 00:07:39,960 --> 00:07:42,363 ‫but that's easier to understand in code. 136 00:07:43,410 --> 00:07:47,160 ‫So as I said, let's come here into the app 137 00:07:47,160 --> 00:07:51,303 ‫and let's pass the currently selected friend in as well. 138 00:07:53,250 --> 00:07:58,250 ‫So selected friend equals selected friend. 139 00:07:58,260 --> 00:08:00,900 ‫And now as we save prettier puts each 140 00:08:00,900 --> 00:08:03,480 ‫of these props into its own line. 141 00:08:03,480 --> 00:08:06,723 ‫So this makes it a lot easier to see what's going on here. 142 00:08:08,040 --> 00:08:10,920 ‫But anyway, the friend list now receives 143 00:08:10,920 --> 00:08:12,183 ‫the selected friend. 144 00:08:13,440 --> 00:08:16,830 ‫So let's add that here. 145 00:08:16,830 --> 00:08:20,400 ‫And then once again, we don't need it directly here 146 00:08:20,400 --> 00:08:22,260 ‫in the list, but we will need it 147 00:08:22,260 --> 00:08:25,803 ‫inside the friend so we can just pass that through here. 148 00:08:28,170 --> 00:08:32,310 ‫Selected friend equals selected friend. 149 00:08:32,310 --> 00:08:34,620 ‫And by the way, whenever this happens, 150 00:08:34,620 --> 00:08:36,540 ‫so whenever we have a component 151 00:08:36,540 --> 00:08:38,790 ‫that doesn't actually need a prop 152 00:08:38,790 --> 00:08:41,850 ‫but all it does with the prop is to pass it down 153 00:08:41,850 --> 00:08:46,173 ‫into one of its children, we say that we are prop drilling. 154 00:08:47,100 --> 00:08:49,290 ‫So in this case that's not a big problem 155 00:08:49,290 --> 00:08:51,780 ‫but sometimes we need to pass some prop 156 00:08:51,780 --> 00:08:54,210 ‫through like five or six levels. 157 00:08:54,210 --> 00:08:56,370 ‫And so then it becomes really problematic 158 00:08:56,370 --> 00:08:58,710 ‫and we then need to solve that problem. 159 00:08:58,710 --> 00:09:01,380 ‫But here, that's no issue. 160 00:09:01,380 --> 00:09:03,900 ‫I just wanted to already prepare you 161 00:09:03,900 --> 00:09:06,090 ‫for what's ahead basically. 162 00:09:06,090 --> 00:09:08,793 ‫So at some point we will talk about that in detail. 163 00:09:09,660 --> 00:09:12,540 ‫But anyway, now here we can compare 164 00:09:12,540 --> 00:09:16,593 ‫that selected friend with the current friend basically. 165 00:09:18,210 --> 00:09:21,147 ‫So let's say is selected. 166 00:09:21,147 --> 00:09:23,340 ‫And so here we want a Boolean. 167 00:09:23,340 --> 00:09:28,260 ‫And so we can simply do selected friend dot ID 168 00:09:28,260 --> 00:09:33,260 ‫equal to friend dot ID, and that's it. 169 00:09:34,650 --> 00:09:37,470 ‫So now we can use this to conditionally define 170 00:09:37,470 --> 00:09:38,710 ‫a class name here 171 00:09:40,800 --> 00:09:44,520 ‫and here let's now use JavaScript mode again 172 00:09:44,520 --> 00:09:48,210 ‫so that we can say is selected, 173 00:09:48,210 --> 00:09:51,270 ‫then add the class of selected 174 00:09:51,270 --> 00:09:53,673 ‫and if not, then no class at all. 175 00:09:55,410 --> 00:09:56,250 ‫All right? 176 00:09:56,250 --> 00:09:58,440 ‫And you see 177 00:09:58,440 --> 00:10:01,650 ‫well actually you don't see this is the demo app 178 00:10:01,650 --> 00:10:03,570 ‫but you see it here. 179 00:10:03,570 --> 00:10:06,750 ‫So this already got now the nice background color 180 00:10:06,750 --> 00:10:08,430 ‫and if we select this one 181 00:10:08,430 --> 00:10:11,370 ‫then it changes here to this other friend. 182 00:10:11,370 --> 00:10:15,570 ‫And so that's simply because this ID here of this friend 183 00:10:15,570 --> 00:10:19,710 ‫is now exactly the same ID of the one that we have selected. 184 00:10:19,710 --> 00:10:22,830 ‫And now all we need to do is to change that text error 185 00:10:22,830 --> 00:10:25,893 ‫for closing until that's down here. 186 00:10:30,120 --> 00:10:35,120 ‫So is selected and if so it should be close 187 00:10:35,430 --> 00:10:38,070 ‫and otherwise select. 188 00:10:38,070 --> 00:10:40,143 ‫And yeah, there it is. 189 00:10:41,100 --> 00:10:41,933 ‫Great, 190 00:10:43,500 --> 00:10:45,180 ‫so that's working. 191 00:10:45,180 --> 00:10:48,720 ‫But what's not working is that when we click here again 192 00:10:48,720 --> 00:10:51,090 ‫is that this is not closed. 193 00:10:51,090 --> 00:10:54,240 ‫And that makes sense because nowhere we are saying 194 00:10:54,240 --> 00:10:56,310 ‫that when we click here again 195 00:10:56,310 --> 00:10:59,043 ‫that the state should be back to null. 196 00:11:00,150 --> 00:11:02,133 ‫And so that's what we need to do next. 197 00:11:03,000 --> 00:11:05,850 ‫So here where we handle the selection, basically 198 00:11:05,850 --> 00:11:09,330 ‫when there is already a front selected, so which means 199 00:11:09,330 --> 00:11:12,660 ‫that this year is open, when we click here again 200 00:11:12,660 --> 00:11:16,860 ‫we want to change the selected friend back to now. 201 00:11:16,860 --> 00:11:19,560 ‫So back to the initial state basically. 202 00:11:19,560 --> 00:11:22,980 ‫And so here now we need to do something else. 203 00:11:22,980 --> 00:11:24,963 ‫Let's just comment it out. 204 00:11:27,750 --> 00:11:31,260 ‫And so now this will actually depend on the current state. 205 00:11:31,260 --> 00:11:34,950 ‫So let's just call this the selected. 206 00:11:34,950 --> 00:11:36,390 ‫So we're currently selected here 207 00:11:36,390 --> 00:11:38,790 ‫in this callback is just called selected 208 00:11:38,790 --> 00:11:40,953 ‫so that we don't have to write so much. 209 00:11:41,850 --> 00:11:46,600 ‫Then here we can say if the selected dot ID is equal 210 00:11:47,610 --> 00:11:50,973 ‫the friend dot ID that we're passing in, 211 00:11:51,900 --> 00:11:54,390 ‫then let's set it back to now 212 00:11:54,390 --> 00:11:58,233 ‫and otherwise then set it to the past in friend. 213 00:11:59,970 --> 00:12:03,210 ‫Alright, so whenever the currently selected, 214 00:12:03,210 --> 00:12:07,680 ‫let's actually change this here to to cur 215 00:12:07,680 --> 00:12:09,360 ‫which stands for current. 216 00:12:09,360 --> 00:12:12,300 ‫So if the currently selected dot ID 217 00:12:12,300 --> 00:12:14,820 ‫is equal to the friend ID 218 00:12:14,820 --> 00:12:16,770 ‫so the friend that is passed in 219 00:12:16,770 --> 00:12:19,680 ‫then that means that it is actually open 220 00:12:19,680 --> 00:12:22,320 ‫so that right now the form is being displayed. 221 00:12:22,320 --> 00:12:24,720 ‫So in that case, we want to actually close it. 222 00:12:24,720 --> 00:12:29,010 ‫And so then we set it back to now, right? 223 00:12:29,010 --> 00:12:33,400 ‫So let's try that and well, we got a bug 224 00:12:34,980 --> 00:12:36,630 ‫so let's see what that is. 225 00:12:36,630 --> 00:12:39,360 ‫And yes, this is what I was expecting. 226 00:12:39,360 --> 00:12:42,160 ‫So we cannot read the properties of null 227 00:12:43,380 --> 00:12:46,350 ‫right here in the friend. 228 00:12:46,350 --> 00:12:48,090 ‫So right here. 229 00:12:48,090 --> 00:12:52,020 ‫And so that is because right now the selected friend is null 230 00:12:52,020 --> 00:12:52,920 ‫isn't it? 231 00:12:52,920 --> 00:12:56,280 ‫And so on null, we do not have the ID property. 232 00:12:56,280 --> 00:12:59,160 ‫And so therefore then this breaks. 233 00:12:59,160 --> 00:13:01,830 ‫But fortunately for us in modern JavaScript 234 00:13:01,830 --> 00:13:03,690 ‫we have optional training. 235 00:13:03,690 --> 00:13:06,630 ‫And so this is very easy to solve. 236 00:13:06,630 --> 00:13:09,150 ‫And if you're not familiar with the syntax, then just 237 00:13:09,150 --> 00:13:12,963 ‫go back to the section where a review essential JavaScript. 238 00:13:14,010 --> 00:13:16,590 ‫Now here, this friend will always exist. 239 00:13:16,590 --> 00:13:19,140 ‫And so here we don't need optional training. 240 00:13:19,140 --> 00:13:21,960 ‫So we will never run into problems there. 241 00:13:21,960 --> 00:13:25,710 ‫But let's do the same up here as well 242 00:13:25,710 --> 00:13:29,880 ‫because again the currently selected does not always exist. 243 00:13:29,880 --> 00:13:34,323 ‫I mean sometimes it's null and then this doesn't work. 244 00:13:35,610 --> 00:13:40,350 ‫Okay, so we select it, then we select this 245 00:13:40,350 --> 00:13:43,980 ‫and if I click again, which is what we just implemented 246 00:13:43,980 --> 00:13:47,730 ‫then beautiful, the form disappeared. 247 00:13:47,730 --> 00:13:52,200 ‫We have no bugs here and everything is back to normal. 248 00:13:52,200 --> 00:13:54,330 ‫Great, and now just to finish 249 00:13:54,330 --> 00:13:57,300 ‫let's handle one small edge case. 250 00:13:57,300 --> 00:14:00,600 ‫So let's say that we decided to add a friend 251 00:14:00,600 --> 00:14:03,240 ‫but then for some reason we don't 252 00:14:03,240 --> 00:14:05,190 ‫we're not interested anymore in this. 253 00:14:05,190 --> 00:14:08,640 ‫And then we click here to open up this form. 254 00:14:08,640 --> 00:14:11,220 ‫So then we have both of them open at the same time, 255 00:14:11,220 --> 00:14:13,050 ‫which looks a bit weird. 256 00:14:13,050 --> 00:14:16,260 ‫And so let's automatically close this form here 257 00:14:16,260 --> 00:14:18,000 ‫whenever we open this one. 258 00:14:18,000 --> 00:14:21,390 ‫And so this will then again show you the huge power 259 00:14:21,390 --> 00:14:22,223 ‫of state. 260 00:14:23,100 --> 00:14:24,780 ‫So all we need is one line 261 00:14:24,780 --> 00:14:28,023 ‫of code right here where we handle this click. 262 00:14:29,190 --> 00:14:30,720 ‫So all we have to do here 263 00:14:30,720 --> 00:14:34,350 ‫in handle selection is to select the friend first 264 00:14:34,350 --> 00:14:39,350 ‫and then we set show at friend 265 00:14:39,420 --> 00:14:40,533 ‫always to false. 266 00:14:42,150 --> 00:14:43,893 ‫So let's reload that. 267 00:14:45,480 --> 00:14:48,570 ‫So I open the form, then I select Anthony. 268 00:14:48,570 --> 00:14:50,370 ‫And so that closes this one 269 00:14:50,370 --> 00:14:53,340 ‫and opens the one that we're interested in. 270 00:14:53,340 --> 00:14:54,780 ‫Great, and with this 271 00:14:54,780 --> 00:14:58,260 ‫we are now ready to actually make this form here dynamic 272 00:14:58,260 --> 00:14:59,763 ‫right in the next video.