‫In the lecture about component composition,
‫I said that we can use the children prop
‫for composition or an explicitly defined prop.
‫And so let's now quickly explore that second option.
‫So instead of using the children prop in a component
‫and then passing in a component like this,
‫we can use an explicit prop as an alternative.
‫So let me show you what I mean
‫by first commenting out all of this.
‫And then we can go to the box component.
‫So down here, and now instead of accepting children here,
‫let's say we accept something called element,
‫and it can really be called anything.
‫So just L or really whatever.
‫And so now we can go back up here
‫and include the box in the old way.
‫So closing it immediately
‫but then we can specify the element prop.
‫And now here we can then
‫do exactly what we had here.
‫So let's copy that and paste it,
‫give it a save and that worked.
‫So now we have our movie list like here
‫and it was passed into the box component
‫as an explicit prop.
‫In this case, a prop called element.
‫So before what we had here
‫is that we were basically implicitly passing
‫in this component into the box,
‫and then we read it there
‫with the children prop.
‫But here we now basically pass it in more explicitly.
‫So we really say that we have an element prop
‫and then we place whatever
‫we want to pass in right here,
‫so right into the element prop.
‫And this pattern is used in some library,
‫for example, in React Router.
‫And so this is why I thought
‫it might be interesting
‫to show this to you right now.
‫And of course we can do the same
‫with the other box here.
‫So simply saying element and then this.
‫Now here, basically we are passing
‫in a brand new piece of JSX.
‫And so here we now actually need a fragment.
‫Give it a save and there we go.
‫So the app now looks exactly the same as before
‫but we basically passed in an element
‫or multiple elements here
‫instead of using the children prop.
‫But the result is exactly the same.
‫And under the hood, inside React,
‫it should also be basically exactly the same.
‫So this can be a viable pattern
‫in case you need to pass in multiple elements
‫and give them separate names.
‫So that would be a perfectly fine use case
‫for using something like an element prop
‫or really any other prop with any other name
‫instead of the implicit children prop.
‫But in our case,
‫let's go back to what we had before
‫because I think it looks a lot nicer actually
‫and it's also clearly the preferred way
‫of doing this inside React.
‫So this was really just to show you.
‫So I will just delete this entire code
‫and put this one here back,
‫and then let's go to the box
‫and fix it there as well.
‫And by the way,
‫let me show you a very nice trick in VS code
‫which is that if you hover over any component here
‫and then hit command on the Mac
‫or control on Windows,
‫we can actually go right
‫to the definition of the function.
‫So in this case, of the component,
‫so I'm hovering box here
‫then I hit the command key, click,
‫and then I immediately move there.
‫And what's even nicer is that
‫if we do the same down here,
‫so again, hitting the command or the control key,
‫then we go right back up.
‫Well, in this case,
‫somehow it doesn't work,
‫but usually it should.
‫But yeah, what matters is that we can move
‫from where the component is called
‫into the place where it is actually defined.
‫And so now let's change element back to children.
‫And then we have just what we had before.
‫So this was really just to show you
‫an alternative way of using component composition
‫without the children prop.
‫But again, using children is by far
‫the preferred way of doing things.