1 00:00:01,050 --> 00:00:04,380 ‫Let's now implement the first feature of our app 2 00:00:04,380 --> 00:00:08,193 ‫which is the ability to add new friends to the list. 3 00:00:10,170 --> 00:00:15,150 ‫So let's come here to the FormAddFriend component 4 00:00:15,150 --> 00:00:17,820 ‫which is where that is going to happen. 5 00:00:17,820 --> 00:00:21,300 ‫So the first thing is that we need to get the value 6 00:00:21,300 --> 00:00:24,780 ‫of these input fields into our application. 7 00:00:24,780 --> 00:00:26,820 ‫So right here into this component. 8 00:00:26,820 --> 00:00:28,710 ‫And how do we do that? 9 00:00:28,710 --> 00:00:32,460 ‫Well, as we already know, we use controlled elements 10 00:00:32,460 --> 00:00:36,270 ‫where we will have one piece of state for each of the inputs 11 00:00:36,270 --> 00:00:39,510 ‫and then as the user types something here, 12 00:00:39,510 --> 00:00:42,090 ‫that value here of the input field 13 00:00:42,090 --> 00:00:44,523 ‫will be synced with that state. 14 00:00:46,410 --> 00:00:48,690 ‫So let's do that, 15 00:00:48,690 --> 00:00:52,240 ‫and let's write name and setName. 16 00:00:55,649 --> 00:00:59,520 ‫That then, as always, we call our useState. 17 00:00:59,520 --> 00:01:03,843 ‫And let's immediately do the same thing also for the image. 18 00:01:07,080 --> 00:01:09,600 ‫And now all we have to do is to wire up 19 00:01:09,600 --> 00:01:12,543 ‫these states to our input fields. 20 00:01:13,410 --> 00:01:16,110 ‫And we have done this many times at this point, 21 00:01:16,110 --> 00:01:18,840 ‫so this is hopefully nothing new for you. 22 00:01:18,840 --> 00:01:21,450 ‫So again, we first define the state, 23 00:01:21,450 --> 00:01:24,660 ‫then we set the value to that state. 24 00:01:24,660 --> 00:01:27,780 ‫So basically controlling that input field. 25 00:01:27,780 --> 00:01:30,900 ‫And then we listen to the change event 26 00:01:30,900 --> 00:01:33,240 ‫with the onChange listener. 27 00:01:33,240 --> 00:01:36,093 ‫And what we do is to take the event, 28 00:01:37,140 --> 00:01:41,100 ‫and then update the state 29 00:01:41,100 --> 00:01:44,663 ‫using that event.target.value. 30 00:01:47,670 --> 00:01:50,223 ‫Alright, and let's see. 31 00:01:52,920 --> 00:01:55,020 ‫That should already be working. 32 00:01:55,020 --> 00:02:00,020 ‫Let's come here to the, well, so to the form itself. 33 00:02:02,100 --> 00:02:04,473 ‫And then we should see the state down there. 34 00:02:05,310 --> 00:02:07,503 ‫Well, somehow that doesn't really work. 35 00:02:09,540 --> 00:02:11,313 ‫Let's try that again. 36 00:02:15,540 --> 00:02:16,563 ‫And, well. 37 00:02:21,360 --> 00:02:24,120 ‫Yeah, here it is, so that's the state, 38 00:02:24,120 --> 00:02:28,230 ‫simply my name written wrong. (chuckles) 39 00:02:28,230 --> 00:02:30,690 ‫But yeah, let's not do the same thing here 40 00:02:30,690 --> 00:02:33,090 ‫in this other input field. 41 00:02:33,090 --> 00:02:37,953 ‫So value, image, and then onChange, 42 00:02:40,140 --> 00:02:45,140 ‫e setImage to e.target.value. 43 00:02:49,590 --> 00:02:53,700 ‫All right, then we get some error here for some reason. 44 00:02:53,700 --> 00:02:55,053 ‫So let's just reload, 45 00:02:56,850 --> 00:02:58,413 ‫get some more space here. 46 00:03:02,460 --> 00:03:06,060 ‫And then we should, of course, 47 00:03:06,060 --> 00:03:09,210 ‫see this state already in the component. 48 00:03:09,210 --> 00:03:12,150 ‫And there it is. Nice. 49 00:03:12,150 --> 00:03:15,603 ‫Now actually here I want some default already. 50 00:03:16,620 --> 00:03:19,980 ‫So let me show you what exactly that is. 51 00:03:19,980 --> 00:03:22,830 ‫So by default, we already want this part here 52 00:03:22,830 --> 00:03:24,750 ‫of the image URL. 53 00:03:24,750 --> 00:03:29,750 ‫So let's copy that, and then let's come down here. 54 00:03:30,690 --> 00:03:33,480 ‫And so by default, this will be our image. 55 00:03:33,480 --> 00:03:36,090 ‫And then when we actually create the new friend, 56 00:03:36,090 --> 00:03:39,330 ‫we will add something to it in order to make it unique. 57 00:03:39,330 --> 00:03:43,380 ‫But anyway, now the next step is here to listen 58 00:03:43,380 --> 00:03:46,380 ‫for the onSubmit event. 59 00:03:46,380 --> 00:03:48,900 ‫So again, just like we have been doing before. 60 00:03:48,900 --> 00:03:51,240 ‫So this submit event will get fired 61 00:03:51,240 --> 00:03:54,690 ‫whenever we submit a form by clicking, 62 00:03:54,690 --> 00:03:56,940 ‫so there on that button or hitting Enter 63 00:03:56,940 --> 00:03:59,670 ‫while we are in one of these fields. 64 00:03:59,670 --> 00:04:02,580 ‫And so then that submit event gets fired off, 65 00:04:02,580 --> 00:04:07,233 ‫and then we call the function, which will be handleSubmit. 66 00:04:11,700 --> 00:04:16,700 ‫So then let's create that function, handleSubmit. 67 00:04:16,740 --> 00:04:19,170 ‫And remember that this function here gets called 68 00:04:19,170 --> 00:04:21,960 ‫by React with the event object. 69 00:04:21,960 --> 00:04:24,090 ‫And so then the first thing that we have to do 70 00:04:24,090 --> 00:04:27,180 ‫is to prevent the default action 71 00:04:27,180 --> 00:04:30,510 ‫which would be to reload the entire page, 72 00:04:30,510 --> 00:04:33,810 ‫which is not what we want in a single-page application 73 00:04:33,810 --> 00:04:35,370 ‫like we are building. 74 00:04:35,370 --> 00:04:38,400 ‫And so the event handler function for a form, 75 00:04:38,400 --> 00:04:42,183 ‫so on an onSubmit, always needs the event.preventDefault. 76 00:04:43,895 --> 00:04:47,610 ‫And now let's create a new friend object 77 00:04:47,610 --> 00:04:51,213 ‫so that we can then add that to our array. 78 00:04:52,650 --> 00:04:56,640 ‫So that should have name, image, 79 00:04:56,640 --> 00:05:01,500 ‫and the balance should start at zero, of course. 80 00:05:01,500 --> 00:05:04,470 ‫So no one owes anyone anything. 81 00:05:04,470 --> 00:05:06,033 ‫We also want an ID. 82 00:05:07,555 --> 00:05:11,610 ‫And let's create the ID using the built-in browser 83 00:05:11,610 --> 00:05:13,323 ‫crypto.randomUUID. 84 00:05:16,170 --> 00:05:19,080 ‫And so this is a very good way of generating 85 00:05:19,080 --> 00:05:21,690 ‫random IDs right in the browser. 86 00:05:21,690 --> 00:05:24,090 ‫So this is not an external packages, 87 00:05:24,090 --> 00:05:26,520 ‫but it won't work in older browsers. 88 00:05:26,520 --> 00:05:28,260 ‫But here we don't care about that. 89 00:05:28,260 --> 00:05:30,480 ‫We just want to make this work. 90 00:05:30,480 --> 00:05:33,870 ‫And so with this, we have a new friend. 91 00:05:33,870 --> 00:05:36,840 ‫Let's log it to the console here for now 92 00:05:36,840 --> 00:05:39,663 ‫just to see that everything is working correctly. 93 00:05:41,820 --> 00:05:44,613 ‫Give it a safe. Let's reload here. 94 00:05:47,880 --> 00:05:50,460 ‫And now in the console we should see that object. 95 00:05:50,460 --> 00:05:51,993 ‫And indeed, there it is. 96 00:05:52,830 --> 00:05:56,010 ‫So balance, and here I didn't call the function. 97 00:05:56,010 --> 00:05:58,680 ‫I just passed in the function, 98 00:05:58,680 --> 00:06:01,380 ‫which of course is not correct. 99 00:06:01,380 --> 00:06:02,850 ‫Let's try that again. 100 00:06:02,850 --> 00:06:04,590 ‫And now here it is. 101 00:06:04,590 --> 00:06:07,020 ‫So this is the random ID that was generated. 102 00:06:07,020 --> 00:06:11,220 ‫Here is the image and the name and the balance. 103 00:06:11,220 --> 00:06:12,810 ‫Now as I was saying, 104 00:06:12,810 --> 00:06:16,500 ‫I actually want to now add something to this image, 105 00:06:16,500 --> 00:06:19,950 ‫so to this string that we already have as a default. 106 00:06:19,950 --> 00:06:22,893 ‫So let's create a template literal here. 107 00:06:24,690 --> 00:06:29,507 ‫And to now I want to do equal and then the id. 108 00:06:33,300 --> 00:06:35,490 ‫Well, now of course we cannot do that. 109 00:06:35,490 --> 00:06:40,490 ‫So let's create this here outside as another variable. 110 00:06:40,770 --> 00:06:43,203 ‫So const id equals this, 111 00:06:44,040 --> 00:06:46,893 ‫and then down here just like this. 112 00:06:48,360 --> 00:06:50,910 ‫So the way that this works, and the reason 113 00:06:50,910 --> 00:06:55,620 ‫why we are adding this id here is that this string here, 114 00:06:55,620 --> 00:06:58,380 ‫this URL, if we open it, 115 00:06:58,380 --> 00:07:03,380 ‫it will basically give us a small image with the size of 48. 116 00:07:04,440 --> 00:07:06,030 ‫But when we reload, 117 00:07:06,030 --> 00:07:09,060 ‫it'll each time give us a different image. 118 00:07:09,060 --> 00:07:10,650 ‫But of course we don't want that. 119 00:07:10,650 --> 00:07:14,430 ‫So we want each image to be fixed basically to the person. 120 00:07:14,430 --> 00:07:18,030 ‫And the way we can do that is to attach something here. 121 00:07:18,030 --> 00:07:19,980 ‫So it doesn't matter what string, 122 00:07:19,980 --> 00:07:23,010 ‫but now each time that we open this URL, 123 00:07:23,010 --> 00:07:25,770 ‫we will always get the exact same image. 124 00:07:25,770 --> 00:07:28,770 ‫So it'll always be this one here. 125 00:07:28,770 --> 00:07:31,950 ‫And as I reload, we should get exactly the same. 126 00:07:31,950 --> 00:07:34,320 ‫Well, that didn't work actually, 127 00:07:34,320 --> 00:07:36,420 ‫but maybe that's just because someone else 128 00:07:36,420 --> 00:07:37,833 ‫has already used this. 129 00:07:39,270 --> 00:07:41,610 ‫But yeah, this here should be pretty unique. 130 00:07:41,610 --> 00:07:45,360 ‫And then we should always get the same image. 131 00:07:45,360 --> 00:07:48,930 ‫Now there's just some small changes that we should do here. 132 00:07:48,930 --> 00:07:51,813 ‫Ah, of course not here, but here. 133 00:07:52,830 --> 00:07:56,250 ‫So first, after we submit the form, 134 00:07:56,250 --> 00:07:58,450 ‫then we should go back here to the defaults. 135 00:07:59,730 --> 00:08:00,873 ‫So let's do that. 136 00:08:03,360 --> 00:08:06,340 ‫So set the name back to empty 137 00:08:07,290 --> 00:08:10,170 ‫and set the image back to, 138 00:08:10,170 --> 00:08:12,033 ‫well, to just this here. 139 00:08:16,050 --> 00:08:19,080 ‫Because, of course, the user could want to input 140 00:08:19,080 --> 00:08:22,050 ‫some other URL here, it doesn't have to be this one. 141 00:08:22,050 --> 00:08:24,180 ‫It's just the default that we're using 142 00:08:24,180 --> 00:08:27,330 ‫so that we don't have to write this manually each time. 143 00:08:27,330 --> 00:08:31,233 ‫So if we try this again, then you see that it gets empty. 144 00:08:32,190 --> 00:08:35,883 ‫And here, it should then also go back to the default. 145 00:08:36,960 --> 00:08:41,130 ‫Now if we submit this right now without anything, 146 00:08:41,130 --> 00:08:43,440 ‫then, of course, something will still get locked 147 00:08:43,440 --> 00:08:44,580 ‫to the console. 148 00:08:44,580 --> 00:08:48,120 ‫So all of this here, all this code is still executed. 149 00:08:48,120 --> 00:08:50,370 ‫But we actually don't want that. 150 00:08:50,370 --> 00:08:53,160 ‫So let's add some guard clause here 151 00:08:53,160 --> 00:08:58,160 ‫saying that if we have no name or we have no image, 152 00:08:58,440 --> 00:09:00,480 ‫then return immediately. 153 00:09:00,480 --> 00:09:03,303 ‫And so in this case, nothing is going to happen. 154 00:09:04,290 --> 00:09:05,730 ‫So with this, nothing happens. 155 00:09:05,730 --> 00:09:09,243 ‫But if we have a name, then of course the code works. 156 00:09:10,950 --> 00:09:15,950 ‫Okay, so the form now works, but now comes the harder part. 157 00:09:16,050 --> 00:09:18,930 ‫So how do we now actually get this object 158 00:09:18,930 --> 00:09:22,380 ‫that we locked here onto our FriendsList? 159 00:09:22,380 --> 00:09:24,390 ‫Well, let's think about it. 160 00:09:24,390 --> 00:09:26,520 ‫So each time that we add a new friend, 161 00:09:26,520 --> 00:09:30,180 ‫we want that friend immediately added here to the list, 162 00:09:30,180 --> 00:09:33,660 ‫so to that UI right here. 163 00:09:33,660 --> 00:09:36,080 ‫So we want something to happen in the UI, 164 00:09:36,080 --> 00:09:39,480 ‫or in other words, we want the UI to render. 165 00:09:39,480 --> 00:09:41,910 ‫And so once again, that's a clear sign 166 00:09:41,910 --> 00:09:43,950 ‫that we need some state. 167 00:09:43,950 --> 00:09:46,650 ‫So that is pretty clear, but now we need to figure out 168 00:09:46,650 --> 00:09:49,140 ‫where to place that piece of state. 169 00:09:49,140 --> 00:09:50,940 ‫And for that, let's take a look 170 00:09:50,940 --> 00:09:53,703 ‫at our component tree here once again. 171 00:09:56,130 --> 00:09:57,430 ‫Yeah, let's see all of it. 172 00:09:58,710 --> 00:10:01,740 ‫So our FriendsList component here is the one 173 00:10:01,740 --> 00:10:05,460 ‫that is going to display the friends, right? 174 00:10:05,460 --> 00:10:09,420 ‫However it is the FormAddFriend where we want to update 175 00:10:09,420 --> 00:10:12,690 ‫that list of friends because, well, of course, 176 00:10:12,690 --> 00:10:14,880 ‫this is where we add a new friend. 177 00:10:14,880 --> 00:10:16,620 ‫So the update happens here, 178 00:10:16,620 --> 00:10:19,140 ‫but the state itself is needed here 179 00:10:19,140 --> 00:10:20,613 ‫in this sibling component. 180 00:10:21,480 --> 00:10:23,850 ‫So what does that sound like? 181 00:10:23,850 --> 00:10:26,460 ‫Well, it sounds as though we have to lift 182 00:10:26,460 --> 00:10:30,930 ‫the Friends state App here into the App, right? 183 00:10:30,930 --> 00:10:33,900 ‫Because this way both of these components, 184 00:10:33,900 --> 00:10:36,540 ‫or actually all of them can get access 185 00:10:36,540 --> 00:10:38,673 ‫to that Friends state. 186 00:10:40,170 --> 00:10:41,643 ‫So let's do that. 187 00:10:42,600 --> 00:10:47,550 ‫And first of all, let's go to the FriendsList itself 188 00:10:47,550 --> 00:10:50,400 ‫where right now we have this friends here 189 00:10:50,400 --> 00:10:52,140 ‫set to initialFriends. 190 00:10:52,140 --> 00:10:54,840 ‫And so now let's get rid of this part. 191 00:10:54,840 --> 00:10:58,890 ‫And instead let's create a lifted up state variable 192 00:10:58,890 --> 00:11:03,003 ‫in the parent component, which is, in this case, just App. 193 00:11:05,400 --> 00:11:07,837 ‫So friends and setFriends 194 00:11:11,910 --> 00:11:13,650 ‫and then useState. 195 00:11:13,650 --> 00:11:16,680 ‫And what should the initial value be now? 196 00:11:16,680 --> 00:11:18,120 ‫Well not just an empty array 197 00:11:18,120 --> 00:11:20,670 ‫because we actually want these three friends here 198 00:11:20,670 --> 00:11:23,250 ‫to be visible at the very beginning. 199 00:11:23,250 --> 00:11:26,010 ‫I mean, it probably doesn't make a lot of sense 200 00:11:26,010 --> 00:11:29,310 ‫for all the users to have these three friends, 201 00:11:29,310 --> 00:11:33,240 ‫but let's just say that this is how it works. 202 00:11:33,240 --> 00:11:35,250 ‫So let's just say that these friends 203 00:11:35,250 --> 00:11:38,763 ‫are basically the default friends of everyone. 204 00:11:39,870 --> 00:11:42,870 ‫Because this is just a demo anyway. 205 00:11:42,870 --> 00:11:45,900 ‫Now here then of course immediately get the problem 206 00:11:45,900 --> 00:11:49,920 ‫that inside the FriendsList, friends is no longer defined. 207 00:11:49,920 --> 00:11:54,453 ‫So we need to fix that by now passing in friends as a prop. 208 00:11:58,710 --> 00:12:01,440 ‫So giving this component access to the state 209 00:12:01,440 --> 00:12:03,870 ‫by passing it down as a prop. 210 00:12:03,870 --> 00:12:05,433 ‫And so here we receive that, 211 00:12:06,930 --> 00:12:09,090 ‫and then the component will be happy. 212 00:12:09,090 --> 00:12:11,640 ‫So it's back to having this array, 213 00:12:11,640 --> 00:12:13,890 ‫and then everything works again. 214 00:12:13,890 --> 00:12:16,860 ‫Great. So that's one part. 215 00:12:16,860 --> 00:12:20,430 ‫And now we need to give this form here 216 00:12:20,430 --> 00:12:23,190 ‫the ability to add new friends, 217 00:12:23,190 --> 00:12:25,620 ‫so to update that friends array. 218 00:12:25,620 --> 00:12:27,630 ‫And we could do that in two ways. 219 00:12:27,630 --> 00:12:31,170 ‫So we could directly pass the setFriends function 220 00:12:31,170 --> 00:12:34,833 ‫into the, where is it? 221 00:12:35,970 --> 00:12:39,120 ‫Yeah, here. So right here into this form. 222 00:12:39,120 --> 00:12:42,483 ‫But let's keep all the event handler functions right here. 223 00:12:43,410 --> 00:12:46,080 ‫And so let's instead create a function 224 00:12:46,080 --> 00:12:47,283 ‫called handleAddFriend. 225 00:12:51,371 --> 00:12:54,000 ‫And then this function here will use 226 00:12:54,000 --> 00:12:55,560 ‫that setFriends function. 227 00:12:55,560 --> 00:12:57,760 ‫And then we pass this one here down instead. 228 00:12:58,830 --> 00:13:02,220 ‫Okay, so let's use setFriends. 229 00:13:02,220 --> 00:13:05,220 ‫And of course this function here then needs to receive 230 00:13:05,220 --> 00:13:09,030 ‫a friend object, so that's the new friend 231 00:13:09,030 --> 00:13:12,780 ‫that we created down there in that component. 232 00:13:12,780 --> 00:13:16,713 ‫And then here, all we do is to take the current friends, 233 00:13:18,150 --> 00:13:20,100 ‫which again could be called anything here 234 00:13:20,100 --> 00:13:23,610 ‫in this new function, and then we create a brand new array, 235 00:13:23,610 --> 00:13:27,240 ‫spread the current friends in there, 236 00:13:27,240 --> 00:13:29,043 ‫and at the new one at the end. 237 00:13:30,420 --> 00:13:32,490 ‫So again, we do it like this, 238 00:13:32,490 --> 00:13:35,280 ‫basically creating a brand new array 239 00:13:35,280 --> 00:13:37,950 ‫instead of using like the push function 240 00:13:37,950 --> 00:13:40,860 ‫because that would mutate the original array. 241 00:13:40,860 --> 00:13:42,660 ‫So it wouldn't create a new one, 242 00:13:42,660 --> 00:13:45,960 ‫and so React in that case would not re-render. 243 00:13:45,960 --> 00:13:48,570 ‫I mean sometimes it might actually work, 244 00:13:48,570 --> 00:13:51,570 ‫but it's not supposed to, because in many situations, 245 00:13:51,570 --> 00:13:53,550 ‫it will actually not work. 246 00:13:53,550 --> 00:13:57,000 ‫So don't do that, don't mutate original arrays 247 00:13:57,000 --> 00:14:00,540 ‫because React is all about immutability. 248 00:14:00,540 --> 00:14:03,150 ‫That's also the reason why we are not allowed 249 00:14:03,150 --> 00:14:05,820 ‫to mutate props, remember that? 250 00:14:05,820 --> 00:14:08,370 ‫So always creating new arrays here. 251 00:14:08,370 --> 00:14:11,190 ‫And the way we do that for adding a new element 252 00:14:11,190 --> 00:14:14,610 ‫to an array is by creating a brand new one like this, 253 00:14:14,610 --> 00:14:16,710 ‫spreading all the current elements 254 00:14:16,710 --> 00:14:19,920 ‫and then adding the new one to the end like this, 255 00:14:19,920 --> 00:14:21,813 ‫so just like we have been doing. 256 00:14:22,680 --> 00:14:25,440 ‫And now let's pass that in here. 257 00:14:25,440 --> 00:14:30,360 ‫So onAddFriend like this, 258 00:14:30,360 --> 00:14:31,953 ‫we pass in handleAddFriend. 259 00:14:34,440 --> 00:14:38,130 ‫So again, we are using this on prefix here 260 00:14:38,130 --> 00:14:40,740 ‫just like React does it for the events 261 00:14:40,740 --> 00:14:44,550 ‫like onClick, onChange onMouseOver. 262 00:14:44,550 --> 00:14:49,110 ‫And so here we create our owns basically like onAddFriend, 263 00:14:49,110 --> 00:14:51,900 ‫so as if this was also an event. 264 00:14:51,900 --> 00:14:54,600 ‫Okay, let's copy this. 265 00:14:54,600 --> 00:14:56,880 ‫So this should already be working now. 266 00:14:56,880 --> 00:14:59,913 ‫And so then let's come down here, 267 00:15:01,050 --> 00:15:01,983 ‫pass that in. 268 00:15:02,850 --> 00:15:05,853 ‫And instead of logging it to the console, 269 00:15:07,050 --> 00:15:09,780 ‫we now want to call this function with the newFriend. 270 00:15:09,780 --> 00:15:12,840 ‫And this should now work actually. 271 00:15:12,840 --> 00:15:15,840 ‫So we have wired up everything correctly. 272 00:15:15,840 --> 00:15:18,510 ‫So we have our shared state here. 273 00:15:18,510 --> 00:15:20,400 ‫So our lifted App state 274 00:15:20,400 --> 00:15:22,470 ‫which is now available to the FriendsList. 275 00:15:22,470 --> 00:15:27,470 ‫And we then update that state down here in this component. 276 00:15:28,260 --> 00:15:31,010 ‫Well, not this one, but... 277 00:15:32,070 --> 00:15:35,190 ‫Ah, it's not in the tree, of course. 278 00:15:35,190 --> 00:15:36,750 ‫Now it will be in the tree. 279 00:15:36,750 --> 00:15:39,630 ‫So this was actually a good learning moment. 280 00:15:39,630 --> 00:15:41,610 ‫So basically seeing that the component 281 00:15:41,610 --> 00:15:44,010 ‫that was not in the UI is of course 282 00:15:44,010 --> 00:15:47,940 ‫also not in the component tree here, right? 283 00:15:47,940 --> 00:15:50,160 ‫So now it is, but when I close it, 284 00:15:50,160 --> 00:15:52,203 ‫you see that it disappears from here. 285 00:15:53,970 --> 00:15:56,610 ‫Okay, but now it is back, and so again, 286 00:15:56,610 --> 00:15:59,340 ‫this is where we will update the friends state 287 00:15:59,340 --> 00:16:03,660 ‫and in a way do some child-to-parent communication. 288 00:16:03,660 --> 00:16:05,880 ‫So the parent being the App component. 289 00:16:05,880 --> 00:16:08,820 ‫And so then as soon as that state is updated, 290 00:16:08,820 --> 00:16:11,370 ‫it's again passed down into the list 291 00:16:11,370 --> 00:16:13,143 ‫which will then re-render. 292 00:16:14,310 --> 00:16:17,670 ‫So let's try. And there it is. 293 00:16:17,670 --> 00:16:20,100 ‫You and Jonas are even. 294 00:16:20,100 --> 00:16:22,500 ‫So this should now create some image there. 295 00:16:22,500 --> 00:16:25,770 ‫It always takes some time for some reason. 296 00:16:25,770 --> 00:16:28,683 ‫But yeah, that worked beautifully. 297 00:16:30,120 --> 00:16:32,940 ‫And we can keep adding more and more. 298 00:16:32,940 --> 00:16:37,140 ‫And then this updates the state exactly in the way 299 00:16:37,140 --> 00:16:39,150 ‫that I have explained before. 300 00:16:39,150 --> 00:16:42,090 ‫Here we update then that propagates the update 301 00:16:42,090 --> 00:16:45,660 ‫basically to the App component, which will then pass it 302 00:16:45,660 --> 00:16:48,873 ‫down in the list, which will re-render as a result. 303 00:16:49,860 --> 00:16:53,400 ‫Nice, there's just one small thing that we want to do, 304 00:16:53,400 --> 00:16:56,550 ‫which is each time that we add a new friend, 305 00:16:56,550 --> 00:16:58,140 ‫so that this form is submitted, 306 00:16:58,140 --> 00:17:01,320 ‫we then want to immediately close that form, 307 00:17:01,320 --> 00:17:02,733 ‫so make it disappear again. 308 00:17:03,780 --> 00:17:05,553 ‫So that's easy enough. 309 00:17:06,870 --> 00:17:09,150 ‫But let's think about it a little bit. 310 00:17:09,150 --> 00:17:12,420 ‫So do you think that we should do that here? 311 00:17:12,420 --> 00:17:13,950 ‫So in this component here, 312 00:17:13,950 --> 00:17:18,240 ‫is this where we should close the form after we're done? 313 00:17:18,240 --> 00:17:21,120 ‫Well, not really, because this part here, 314 00:17:21,120 --> 00:17:23,850 ‫this form is actually not responsible 315 00:17:23,850 --> 00:17:26,340 ‫for showing itself or not. 316 00:17:26,340 --> 00:17:29,280 ‫So as long as this component is actually included 317 00:17:29,280 --> 00:17:33,570 ‫in a component tree, it will be visible, right? 318 00:17:33,570 --> 00:17:36,030 ‫So instead, who controls whether this component 319 00:17:36,030 --> 00:17:41,030 ‫is visible or not is the App component by using this state. 320 00:17:41,640 --> 00:17:46,110 ‫Right, and so we can use this handler function 321 00:17:46,110 --> 00:17:49,170 ‫to not only set the new friend state 322 00:17:49,170 --> 00:17:52,710 ‫but also to hide the form again. 323 00:17:52,710 --> 00:17:54,710 ‫So all we have to do is setShowAddFriend 324 00:17:57,450 --> 00:17:59,400 ‫and set that to false. 325 00:17:59,400 --> 00:18:02,730 ‫So here the state doesn't depend on the previous state. 326 00:18:02,730 --> 00:18:05,823 ‫So here we simply want to always set it to false. 327 00:18:08,790 --> 00:18:13,680 ‫And yeah, we got the new friend, and the form is hidden. 328 00:18:13,680 --> 00:18:17,190 ‫And so this actually completes this feature. 329 00:18:17,190 --> 00:18:20,310 ‫So just make sure that you take now a minute 330 00:18:20,310 --> 00:18:23,160 ‫to review the code that we wrote here, 331 00:18:23,160 --> 00:18:25,560 ‫so in particular the lifting App state, 332 00:18:25,560 --> 00:18:28,110 ‫and how we then wired everything together. 333 00:18:28,110 --> 00:18:30,900 ‫And then once they're done, we will start working 334 00:18:30,900 --> 00:18:33,240 ‫on actually making this main part 335 00:18:33,240 --> 00:18:35,253 ‫of the application work as well.