1 00:00:01,050 --> 00:00:03,990 ‫So let's now use component composition 2 00:00:03,990 --> 00:00:07,290 ‫in order to fix the prop drilling problem that we 3 00:00:07,290 --> 00:00:09,570 ‫have just encountered before. 4 00:00:09,570 --> 00:00:13,980 ‫And in the process, we will also find a way better solution 5 00:00:13,980 --> 00:00:17,133 ‫to building layouts in React applications. 6 00:00:18,690 --> 00:00:22,560 ‫And let's start by fixing the easy prop drilling problem 7 00:00:22,560 --> 00:00:25,560 ‫which is the one where we pass the movies prop 8 00:00:25,560 --> 00:00:28,620 ‫into the NavBar, and then from the NavBar 9 00:00:28,620 --> 00:00:31,440 ‫we pass it here into the NumResults. 10 00:00:31,440 --> 00:00:35,430 ‫So here we only have one level of prop drilling. 11 00:00:35,430 --> 00:00:37,680 ‫Now you might be wondering how can we 12 00:00:37,680 --> 00:00:41,970 ‫use component composition in order to solve this problem? 13 00:00:41,970 --> 00:00:44,130 ‫Well, what if we could use 14 00:00:44,130 --> 00:00:47,160 ‫the NumResults component right here 15 00:00:47,160 --> 00:00:50,760 ‫in the app component instead of in the NavBar? 16 00:00:50,760 --> 00:00:52,290 ‫Then we wouldn't have to pass 17 00:00:52,290 --> 00:00:55,920 ‫in this movie's prop into the NavBar, right? 18 00:00:55,920 --> 00:00:59,940 ‫Which would then fix that prop drilling problem. 19 00:00:59,940 --> 00:01:04,350 ‫So we can actually do that with component composition. 20 00:01:04,350 --> 00:01:05,910 ‫So let me show you how. 21 00:01:05,910 --> 00:01:08,280 ‫So here, instead of accepting the movies, 22 00:01:08,280 --> 00:01:11,910 ‫let's accept children. 23 00:01:11,910 --> 00:01:14,760 ‫And so this is then that empty slot that we talked 24 00:01:14,760 --> 00:01:16,740 ‫about in the previous lecture. 25 00:01:16,740 --> 00:01:19,050 ‫And so now here in the NavBar, 26 00:01:19,050 --> 00:01:21,240 ‫instead of closing it right here 27 00:01:21,240 --> 00:01:25,140 ‫let's have a opening tag and a closing tag. 28 00:01:25,140 --> 00:01:29,673 ‫And then between these two, we can just grab this, 29 00:01:30,900 --> 00:01:32,073 ‫place that here, 30 00:01:33,161 --> 00:01:36,450 ‫and then just include those children. 31 00:01:36,450 --> 00:01:38,910 ‫And that's it actually. 32 00:01:38,910 --> 00:01:43,200 ‫So give it a safe, the app looks exactly the same as before 33 00:01:43,200 --> 00:01:47,310 ‫but we have eliminated the prop drilling problem, right? 34 00:01:47,310 --> 00:01:50,850 ‫Because now we are using NumResults right here 35 00:01:50,850 --> 00:01:54,060 ‫in the component where the state actually lives. 36 00:01:54,060 --> 00:01:56,280 ‫So the movies state in this case. 37 00:01:56,280 --> 00:01:58,890 ‫And so then we can pass it directly 38 00:01:58,890 --> 00:02:00,990 ‫into the component right here 39 00:02:00,990 --> 00:02:03,720 ‫which is the one that actually needs it. 40 00:02:03,720 --> 00:02:06,990 ‫So NumResults is not an intermediary component 41 00:02:06,990 --> 00:02:09,213 ‫just like NavBar was before. 42 00:02:10,290 --> 00:02:13,320 ‫And so of course then here we can finally 43 00:02:13,320 --> 00:02:15,900 ‫and terminally remove it. 44 00:02:15,900 --> 00:02:19,260 ‫And so this then really shows that the prop drilling 45 00:02:19,260 --> 00:02:23,340 ‫has been eliminated and all by using component composition 46 00:02:23,340 --> 00:02:26,880 ‫where we now basically composed the NavBar together 47 00:02:26,880 --> 00:02:29,670 ‫with these three other components here. 48 00:02:29,670 --> 00:02:33,090 ‫So these three is what are becoming the children 49 00:02:33,090 --> 00:02:34,350 ‫of the NavBar. 50 00:02:34,350 --> 00:02:37,560 ‫And so here again, we then accept those children 51 00:02:37,560 --> 00:02:39,093 ‫and simply display them here. 52 00:02:40,020 --> 00:02:42,720 ‫We could also say, for example, that we do not 53 00:02:42,720 --> 00:02:47,430 ‫need to display or to include the logo right here. 54 00:02:47,430 --> 00:02:50,830 ‫So we could, for example, cut it here and place it here 55 00:02:51,840 --> 00:02:55,710 ‫and then it works just exactly the same as before. 56 00:02:55,710 --> 00:02:59,490 ‫So this logo here is just completely stateless anyway, 57 00:02:59,490 --> 00:03:01,980 ‫and it's not really relevant to the app. 58 00:03:01,980 --> 00:03:05,100 ‫And so we could say that it should always be a part 59 00:03:05,100 --> 00:03:09,720 ‫of the NavBar, but maybe these two here can be optional. 60 00:03:09,720 --> 00:03:13,650 ‫So with this, we can very easily later say that, well 61 00:03:13,650 --> 00:03:17,940 ‫maybe we don't need a search here, so remove it. 62 00:03:17,940 --> 00:03:19,320 ‫And there you go. 63 00:03:19,320 --> 00:03:22,200 ‫We didn't even have to touch the NavBar at all. 64 00:03:22,200 --> 00:03:24,120 ‫All we had to do was to come 65 00:03:24,120 --> 00:03:27,690 ‫into our application where we now have an easier way 66 00:03:27,690 --> 00:03:31,983 ‫of seeing basically the overall layout of the application. 67 00:03:33,300 --> 00:03:35,340 ‫Let's, of course, put it back. 68 00:03:35,340 --> 00:03:38,558 ‫And then let's fix the worst problem of prop drilling 69 00:03:38,558 --> 00:03:43,558 ‫that we also have, which is here for this movies list. 70 00:03:44,190 --> 00:03:47,973 ‫So let's do the same with the main component here. 71 00:03:49,740 --> 00:03:51,750 ‫And here remember that we actually need 72 00:03:51,750 --> 00:03:55,353 ‫to pass the movies prop through several layers. 73 00:03:56,940 --> 00:04:01,940 ‫So we pass it from app into main into here, the ListBox. 74 00:04:02,310 --> 00:04:06,213 ‫And so we can remove again, all these intermediary steps. 75 00:04:08,130 --> 00:04:11,730 ‫So here in the main, let's no longer accept the movies 76 00:04:11,730 --> 00:04:14,013 ‫and instead accept children. 77 00:04:15,030 --> 00:04:18,540 ‫So then let's remove the WatchedBox from here 78 00:04:18,540 --> 00:04:21,120 ‫or actually the ListBox, 79 00:04:21,120 --> 00:04:23,610 ‫or actually why not both of them? 80 00:04:23,610 --> 00:04:25,113 ‫So let's cut them from here, 81 00:04:27,420 --> 00:04:28,890 ‫say children 82 00:04:28,890 --> 00:04:31,923 ‫and then we can do the same thing as before. 83 00:04:33,420 --> 00:04:35,523 ‫So here now we get rid of this, 84 00:04:36,990 --> 00:04:38,700 ‫let's close it. 85 00:04:38,700 --> 00:04:42,000 ‫And then just place these two here 86 00:04:42,000 --> 00:04:44,980 ‫and we can then no longer pass the movies 87 00:04:46,440 --> 00:04:49,170 ‫into the main element or the main component 88 00:04:49,170 --> 00:04:51,720 ‫because that one no longer needs it. 89 00:04:51,720 --> 00:04:52,920 ‫I mean, as you know, 90 00:04:52,920 --> 00:04:55,376 ‫it never even needed it in the first place. 91 00:04:55,376 --> 00:04:58,890 ‫It only needed it to pass it further down the tree 92 00:04:58,890 --> 00:05:02,460 ‫but now the tree is basically built in a different way. 93 00:05:02,460 --> 00:05:06,693 ‫And so then again, this component no longer needs that prop. 94 00:05:07,650 --> 00:05:11,130 ‫Nice. And so actually we can keep going. 95 00:05:11,130 --> 00:05:13,800 ‫So we can just do exactly the same thing here 96 00:05:13,800 --> 00:05:15,150 ‫to the ListBox 97 00:05:15,150 --> 00:05:19,500 ‫because that ListBox also doesn't need the movies really. 98 00:05:19,500 --> 00:05:21,990 ‫It's also just passing it down. 99 00:05:21,990 --> 00:05:23,523 ‫And so let's remove it. 100 00:05:25,710 --> 00:05:30,510 ‫So let's grab this, cut it from here. 101 00:05:30,510 --> 00:05:33,270 ‫So this will now become the empty slot here 102 00:05:33,270 --> 00:05:35,223 ‫inside this ListBox component. 103 00:05:36,480 --> 00:05:37,833 ‫So remove that, 104 00:05:40,980 --> 00:05:43,053 ‫do the same thing as before. 105 00:05:45,660 --> 00:05:47,460 ‫Of course, we need to close it here. 106 00:05:50,250 --> 00:05:53,010 ‫And while that's taking a bit too long 107 00:05:53,010 --> 00:05:56,643 ‫let's manually reload here, and still that's not working. 108 00:05:58,050 --> 00:06:00,390 ‫But yeah, the code should be correct. 109 00:06:00,390 --> 00:06:02,790 ‫Let me just remove this from here now 110 00:06:02,790 --> 00:06:07,593 ‫and I will simply close the app and run it again. 111 00:06:08,820 --> 00:06:11,100 ‫So it's the second time we needed to do this 112 00:06:11,100 --> 00:06:16,100 ‫in this section so far, but sometimes that can happen. 113 00:06:16,500 --> 00:06:19,890 ‫Well, apparently this is not the solution this time. 114 00:06:19,890 --> 00:06:22,770 ‫So let's see if we have some error here. 115 00:06:22,770 --> 00:06:26,520 ‫And actually, yeah, sometimes it's a good idea 116 00:06:26,520 --> 00:06:28,680 ‫as I said right in the beginning of the course 117 00:06:28,680 --> 00:06:32,100 ‫to actually read the errors here. 118 00:06:32,100 --> 00:06:36,210 ‫So it says objects are not valid as a React child. 119 00:06:36,210 --> 00:06:40,740 ‫So let's go back to our movie list or or to the ListBox. 120 00:06:40,740 --> 00:06:45,303 ‫Actually, we're just the one that we just did something in. 121 00:06:46,200 --> 00:06:50,010 ‫And yeah, the problem is actually right here. 122 00:06:50,010 --> 00:06:52,710 ‫So here we were basically creating a new object 123 00:06:52,710 --> 00:06:54,270 ‫which is not necessary. 124 00:06:54,270 --> 00:06:56,580 ‫All we need to do here is to really conditionally 125 00:06:56,580 --> 00:06:59,430 ‫render this children prop. 126 00:06:59,430 --> 00:07:00,483 ‫So give it a safe. 127 00:07:01,440 --> 00:07:03,240 ‫And there we go. 128 00:07:03,240 --> 00:07:06,450 ‫Just reload again to get rid of the errors. 129 00:07:06,450 --> 00:07:07,283 ‫And that's it. 130 00:07:08,340 --> 00:07:11,940 ‫So now we are essentially directly passing the movies 131 00:07:11,940 --> 00:07:16,533 ‫prop right here into the movies list from the app component. 132 00:07:18,270 --> 00:07:21,150 ‫So as I just said, we are in the app component. 133 00:07:21,150 --> 00:07:24,210 ‫And now thanks to all this composition here 134 00:07:24,210 --> 00:07:26,850 ‫we can pass the movies directly 135 00:07:26,850 --> 00:07:28,860 ‫into the movies list, which is 136 00:07:28,860 --> 00:07:32,040 ‫in fact the only component that does actually need it. 137 00:07:32,040 --> 00:07:35,520 ‫Not this one, not this one, but only this one. 138 00:07:35,520 --> 00:07:38,490 ‫And of course also this one. 139 00:07:38,490 --> 00:07:41,460 ‫Great. So this is actually a really, 140 00:07:41,460 --> 00:07:45,540 ‫really nice way of building layouts in React applications. 141 00:07:45,540 --> 00:07:50,310 ‫So just by looking at the return JSX from the app component 142 00:07:50,310 --> 00:07:52,740 ‫we can nicely see the entire layout 143 00:07:52,740 --> 00:07:56,430 ‫and also basically the entire componentry. 144 00:07:56,430 --> 00:07:59,310 ‫So what we have here is indeed very similar 145 00:07:59,310 --> 00:08:02,160 ‫to what we can observe right here. 146 00:08:02,160 --> 00:08:04,440 ‫So we have the app which has the NavBar 147 00:08:04,440 --> 00:08:07,560 ‫which in turn has the search and NumResults. 148 00:08:07,560 --> 00:08:10,320 ‫And we have the main, which has the ListBox, 149 00:08:10,320 --> 00:08:12,000 ‫it has the WatchedBox, 150 00:08:12,000 --> 00:08:15,150 ‫and then that one also has some stuff in it. 151 00:08:15,150 --> 00:08:18,060 ‫So here we didn't do the component composition yet 152 00:08:18,060 --> 00:08:20,040 ‫but we will do very soon. 153 00:08:20,040 --> 00:08:21,990 ‫For now, I want to take a break here 154 00:08:21,990 --> 00:08:23,970 ‫and I want you to analyze this code 155 00:08:23,970 --> 00:08:26,040 ‫on your own for a few minutes. 156 00:08:26,040 --> 00:08:29,250 ‫So really understand the deep difference between the code 157 00:08:29,250 --> 00:08:32,820 ‫that we had before and the code that we have right now. 158 00:08:32,820 --> 00:08:36,780 ‫And if necessary, you can also re-watch the previous lecture 159 00:08:36,780 --> 00:08:40,680 ‫in which I explained exactly what is happening as well. 160 00:08:40,680 --> 00:08:44,310 ‫So again, please take now five or 10 minutes to do that 161 00:08:44,310 --> 00:08:46,803 ‫and then let's move on to the next video.