‫So let's now use component composition
‫in order to fix the prop drilling problem that we
‫have just encountered before.
‫And in the process, we will also find a way better solution
‫to building layouts in React applications.
‫And let's start by fixing the easy prop drilling problem
‫which is the one where we pass the movies prop
‫into the NavBar, and then from the NavBar
‫we pass it here into the NumResults.
‫So here we only have one level of prop drilling.
‫Now you might be wondering how can we
‫use component composition in order to solve this problem?
‫Well, what if we could use
‫the NumResults component right here
‫in the app component instead of in the NavBar?
‫Then we wouldn't have to pass
‫in this movie's prop into the NavBar, right?
‫Which would then fix that prop drilling problem.
‫So we can actually do that with component composition.
‫So let me show you how.
‫So here, instead of accepting the movies,
‫let's accept children.
‫And so this is then that empty slot that we talked
‫about in the previous lecture.
‫And so now here in the NavBar,
‫instead of closing it right here
‫let's have a opening tag and a closing tag.
‫And then between these two, we can just grab this,
‫place that here,
‫and then just include those children.
‫And that's it actually.
‫So give it a safe, the app looks exactly the same as before
‫but we have eliminated the prop drilling problem, right?
‫Because now we are using NumResults right here
‫in the component where the state actually lives.
‫So the movies state in this case.
‫And so then we can pass it directly
‫into the component right here
‫which is the one that actually needs it.
‫So NumResults is not an intermediary component
‫just like NavBar was before.
‫And so of course then here we can finally
‫and terminally remove it.
‫And so this then really shows that the prop drilling
‫has been eliminated and all by using component composition
‫where we now basically composed the NavBar together
‫with these three other components here.
‫So these three is what are becoming the children
‫of the NavBar.
‫And so here again, we then accept those children
‫and simply display them here.
‫We could also say, for example, that we do not
‫need to display or to include the logo right here.
‫So we could, for example, cut it here and place it here
‫and then it works just exactly the same as before.
‫So this logo here is just completely stateless anyway,
‫and it's not really relevant to the app.
‫And so we could say that it should always be a part
‫of the NavBar, but maybe these two here can be optional.
‫So with this, we can very easily later say that, well
‫maybe we don't need a search here, so remove it.
‫And there you go.
‫We didn't even have to touch the NavBar at all.
‫All we had to do was to come
‫into our application where we now have an easier way
‫of seeing basically the overall layout of the application.
‫Let's, of course, put it back.
‫And then let's fix the worst problem of prop drilling
‫that we also have, which is here for this movies list.
‫So let's do the same with the main component here.
‫And here remember that we actually need
‫to pass the movies prop through several layers.
‫So we pass it from app into main into here, the ListBox.
‫And so we can remove again, all these intermediary steps.
‫So here in the main, let's no longer accept the movies
‫and instead accept children.
‫So then let's remove the WatchedBox from here
‫or actually the ListBox,
‫or actually why not both of them?
‫So let's cut them from here,
‫say children
‫and then we can do the same thing as before.
‫So here now we get rid of this,
‫let's close it.
‫And then just place these two here
‫and we can then no longer pass the movies
‫into the main element or the main component
‫because that one no longer needs it.
‫I mean, as you know,
‫it never even needed it in the first place.
‫It only needed it to pass it further down the tree
‫but now the tree is basically built in a different way.
‫And so then again, this component no longer needs that prop.
‫Nice. And so actually we can keep going.
‫So we can just do exactly the same thing here
‫to the ListBox
‫because that ListBox also doesn't need the movies really.
‫It's also just passing it down.
‫And so let's remove it.
‫So let's grab this, cut it from here.
‫So this will now become the empty slot here
‫inside this ListBox component.
‫So remove that,
‫do the same thing as before.
‫Of course, we need to close it here.
‫And while that's taking a bit too long
‫let's manually reload here, and still that's not working.
‫But yeah, the code should be correct.
‫Let me just remove this from here now
‫and I will simply close the app and run it again.
‫So it's the second time we needed to do this
‫in this section so far, but sometimes that can happen.
‫Well, apparently this is not the solution this time.
‫So let's see if we have some error here.
‫And actually, yeah, sometimes it's a good idea
‫as I said right in the beginning of the course
‫to actually read the errors here.
‫So it says objects are not valid as a React child.
‫So let's go back to our movie list or or to the ListBox.
‫Actually, we're just the one that we just did something in.
‫And yeah, the problem is actually right here.
‫So here we were basically creating a new object
‫which is not necessary.
‫All we need to do here is to really conditionally
‫render this children prop.
‫So give it a safe.
‫And there we go.
‫Just reload again to get rid of the errors.
‫And that's it.
‫So now we are essentially directly passing the movies
‫prop right here into the movies list from the app component.
‫So as I just said, we are in the app component.
‫And now thanks to all this composition here
‫we can pass the movies directly
‫into the movies list, which is
‫in fact the only component that does actually need it.
‫Not this one, not this one, but only this one.
‫And of course also this one.
‫Great. So this is actually a really,
‫really nice way of building layouts in React applications.
‫So just by looking at the return JSX from the app component
‫we can nicely see the entire layout
‫and also basically the entire componentry.
‫So what we have here is indeed very similar
‫to what we can observe right here.
‫So we have the app which has the NavBar
‫which in turn has the search and NumResults.
‫And we have the main, which has the ListBox,
‫it has the WatchedBox,
‫and then that one also has some stuff in it.
‫So here we didn't do the component composition yet
‫but we will do very soon.
‫For now, I want to take a break here
‫and I want you to analyze this code
‫on your own for a few minutes.
‫So really understand the deep difference between the code
‫that we had before and the code that we have right now.
‫And if necessary, you can also re-watch the previous lecture
‫in which I explained exactly what is happening as well.
‫So again, please take now five or 10 minutes to do that
‫and then let's move on to the next video.