‫As we keep learning about components
‫in this section there is one essential principle that we
‫really need to focus on now, which is component composition.
‫Now, in order to talk about component composition,
‫we first need to take a look
‫at what happens when we simply use
‫or include a component in another component in JSX.
‫So let's say that we have this model component
‫that we want to reuse, and also this success component
‫which simply renders the message well done.
‫And then we just use the success component
‫inside the modal component like this.
‫And this sort of thing is exactly what we have been doing
‫with our components most of the time, right?
‫So we just use them inside of other components.
‫However, when it comes to re-usability
‫this creates a big problem.
‫That's because right now the success component
‫really is inside of modal.
‫They're deeply linked together
‫in the JSX right now, and therefore
‫we cannot reuse this modal component to display some
‫other message inside of it, for example, an error message.
‫But as you can imagine, in order to solve this, we now bring
‫in the technique of component composition where
‫we can compose the model and success components together.
‫So here we have our modal component again, but
‫with a fundamental difference.
‫So this component does not include a predefined component
‫but instead it accepts children with the children prop.
‫So just like we have learned before, so
‫if we get our success component again, we can now basically
‫just pass it into the modal by placing it
‫between the opening and closing tags when we use modal.
‫And if you need a minute to analyze this code a bit better
‫feel free to just pass the video right now
‫because I want you to really grasp the fundamental
‫difference here.
‫So in the first example, the success component is really
‫tied to the model.
‫And so that model might as well be called a success model
‫because we can't use it for anything else anymore.
‫But with component composition, we simply passed the success
‫component right into the model and composed them together
‫in this way.
‫And again, this works thanks to the children prop.
‫Now, of course, we could have passed in any other component
‫which makes the model component highly reusable.
‫So essentially when we do component composition,
‫we leave this hole or this empty slot in the component
‫ready to be filled with any other component that we want.
‫So let's say that later we needed another model window
‫somewhere else in the app,
‫but one that renders this error message.
‫Well, that's pretty easy now.
‫We just used the model component again
‫but this time we pass in the error component as a children.
‫And with this, we have also successfully
‫composed these two components together as well.
‫So formally component composition is the technique
‫of combining different components by using the children prop
‫or by explicitly defining components as props.
‫Now we use composition
‫for two big reasons or in two important situations.
‫First, when we want to create highly reusable
‫and flexible components such as the modal window
‫or really a million other reusable components
‫that we can think of.
‫And we do this really all the time.
‫Now, the second situation in which we can use composition is
‫in order to fix a prop drilling problem
‫like the one that we found in the previous video.
‫And this is actually great for creating layouts
‫as we will do in the next video.
‫Just keep in mind once again
‫that this is only possible because components
‫do not need to know their children in advance
‫which allows us to leave these empty slots inside
‫of them in the form of the children prop.
‫And with that being said, let's return to our project.