‫So we used composition
‫in order to solve a prop drilling problem
‫and to build our layout in a way nicer way.
‫And so now let's use it to build a reusable box component.
‫So we already converted the list box component here
‫to use the children prop
‫in order to then basically fill that slot, so that hole
‫with this component that we pass in as a child component.
‫And so now we could go ahead
‫and do the exact same thing with the watched box.
‫So let's actually go there.
‫So watched box and it's right here.
‫However, if we take a look at this component right here
‫it is very, very similar to that other box.
‫So to that list box.
‫So basically both of them have this state here of isOpen
‫then they have a div with the class of box,
‫and then they have this button
‫which is also exactly the same.
‫And in the end,
‫they will render their children conditionally.
‫So based on the isOpen state.
‫So again, if we go here
‫we will see that it is basically exactly the same.
‫This one here has this watched state,
‫but we can easily move that somewhere else.
‫So what I'm saying is that both the watched box
‫and the movie box have this same state here.
‫Basically they have this same class name, this same button
‫and then they render something conditionally
‫based on the open state.
‫And so this is an amazing candidate
‫to create a reusable component.
‫So let's do that
‫and let's do it separately actually of the other ones.
‫And I will simply call it box.
‫Let me, just to make this a bit easier,
‫cut this one and paste it close to the other one.
‫And then we can see how similar they actually are.
‫And you know what?
‫I will actually not create a new one,
‫but I will immediately convert this one here
‫because the list box is basically already what we want.
‫So let's just re-call it box.
‫Then here we no longer need,
‫like this name here of isOpen1,
‫and setIsOpen1.
‫Let's change that here, change that here, and here.
‫And that's already it.
‫So we no longer need this watched box.
‫So let's completely comment that one out.
‫And so, let's now use this box
‫here inside of this list box that we're using.
‫So box right here, let's remove that one for now.
‫And box here as well.
‫And well for some, ah, I had the wrong one here open still.
‫So just to make sure, let's reload.
‫And so this part still looks exactly the same as before.
‫And so now we can use this reusable box.
‫And simply pass in that content
‫that we passed before into the watched box.
‫Which is basically this, right?
‫So copy that and let's paste that here.
‫And now we get the problem, which I was saying before.
‫Which is that this watched array here now needs to be moved
‫onto this component.
‫So this state that we had before can no longer live here,
‫but it couldn't anyway, as we will see in a future section.
‫So we would have to place this here anyway.
‫So yeah, this fixes the problem.
‫And we shouldn't even need this right here.
‫And so there we go.
‫We just created ourselves a reusable box component.
‫And the state now works, of course, still in both.
‫And so we didn't have to rewrite that same state logic
‫and the same button here in both of these lists
‫because again, they were basically exactly the same.
‫And so what we did, again, was to create this reusable box
‫and in there allow for any children to be passed in.
‫So we created like this empty hole here
‫ready to receive any components that we want
‫which in this case is the movies list.
‫And in this case it's the watched summary
‫and the watched list.
‫So here we have just one children component
‫and here we have two.
‫But no matter what,
‫our box always works for all of these situations.
‫And so again, all of this logic here,
‫so this button here with setting the open state
‫could just be reused in this way.
‫And on top of that, as a bonus
‫we made our application tree here
‫even more explicit in the app component.
‫So now it really is very clear what exactly is happening
‫in the application.
‫Just by looking at this one component,
‫we can immediately see the entire structure
‫of the application.
‫Which is really, really helpful.
‫So this is really great.
‫And we're moving
‫into some more intermediate React territory.
‫But that makes complete sense
‫because we are already in part two,
‫which is exactly for intermediate React.
‫So it's great that at this point
‫we are already able to do something like this,
‫which is already way closer
‫to how real world React applications look like.
‫So really, really keep this technique
‫of component composition in mind.
‫Both for building better layouts, for solving prop drilling
‫and also for creating reusable components like this one.
‫So hopefully you saw how powerful this is.
‫And so as you start writing your own code,
‫be on the watch out for whenever you can do this.
‫So whenever you can create some reusable components
‫in your own code using this amazing technique.