1 00:00:01,050 --> 00:00:03,360 ‫As we keep learning about components 2 00:00:03,360 --> 00:00:07,050 ‫in this section there is one essential principle that we 3 00:00:07,050 --> 00:00:11,703 ‫really need to focus on now, which is component composition. 4 00:00:12,786 --> 00:00:16,697 ‫Now, in order to talk about component composition, 5 00:00:16,697 --> 00:00:18,439 ‫we first need to take a look 6 00:00:18,439 --> 00:00:21,075 ‫at what happens when we simply use 7 00:00:21,075 --> 00:00:26,075 ‫or include a component in another component in JSX. 8 00:00:26,313 --> 00:00:30,160 ‫So let's say that we have this model component 9 00:00:30,160 --> 00:00:34,334 ‫that we want to reuse, and also this success component 10 00:00:34,334 --> 00:00:37,439 ‫which simply renders the message well done. 11 00:00:37,439 --> 00:00:40,493 ‫And then we just use the success component 12 00:00:40,493 --> 00:00:44,790 ‫inside the modal component like this. 13 00:00:44,790 --> 00:00:48,057 ‫And this sort of thing is exactly what we have been doing 14 00:00:48,057 --> 00:00:52,173 ‫with our components most of the time, right? 15 00:00:52,173 --> 00:00:56,056 ‫So we just use them inside of other components. 16 00:00:56,056 --> 00:00:59,417 ‫However, when it comes to re-usability 17 00:00:59,417 --> 00:01:01,959 ‫this creates a big problem. 18 00:01:01,959 --> 00:01:05,558 ‫That's because right now the success component 19 00:01:05,558 --> 00:01:09,100 ‫really is inside of modal. 20 00:01:09,100 --> 00:01:11,370 ‫They're deeply linked together 21 00:01:11,370 --> 00:01:14,196 ‫in the JSX right now, and therefore 22 00:01:14,196 --> 00:01:18,237 ‫we cannot reuse this modal component to display some 23 00:01:18,237 --> 00:01:22,172 ‫other message inside of it, for example, an error message. 24 00:01:22,172 --> 00:01:27,172 ‫But as you can imagine, in order to solve this, we now bring 25 00:01:27,540 --> 00:01:31,140 ‫in the technique of component composition where 26 00:01:31,140 --> 00:01:35,359 ‫we can compose the model and success components together. 27 00:01:35,359 --> 00:01:39,840 ‫So here we have our modal component again, but 28 00:01:39,840 --> 00:01:41,840 ‫with a fundamental difference. 29 00:01:41,840 --> 00:01:46,797 ‫So this component does not include a predefined component 30 00:01:46,797 --> 00:01:51,360 ‫but instead it accepts children with the children prop. 31 00:01:51,360 --> 00:01:55,440 ‫So just like we have learned before, so 32 00:01:55,440 --> 00:01:59,237 ‫if we get our success component again, we can now basically 33 00:01:59,237 --> 00:02:03,000 ‫just pass it into the modal by placing it 34 00:02:03,000 --> 00:02:06,650 ‫between the opening and closing tags when we use modal. 35 00:02:06,650 --> 00:02:10,770 ‫And if you need a minute to analyze this code a bit better 36 00:02:10,770 --> 00:02:13,980 ‫feel free to just pass the video right now 37 00:02:13,980 --> 00:02:17,580 ‫because I want you to really grasp the fundamental 38 00:02:17,580 --> 00:02:18,655 ‫difference here. 39 00:02:18,655 --> 00:02:22,817 ‫So in the first example, the success component is really 40 00:02:22,817 --> 00:02:24,893 ‫tied to the model. 41 00:02:24,893 --> 00:02:29,075 ‫And so that model might as well be called a success model 42 00:02:29,075 --> 00:02:33,597 ‫because we can't use it for anything else anymore. 43 00:02:33,597 --> 00:02:38,430 ‫But with component composition, we simply passed the success 44 00:02:38,430 --> 00:02:42,180 ‫component right into the model and composed them together 45 00:02:42,180 --> 00:02:43,620 ‫in this way. 46 00:02:43,620 --> 00:02:47,442 ‫And again, this works thanks to the children prop. 47 00:02:47,442 --> 00:02:51,757 ‫Now, of course, we could have passed in any other component 48 00:02:51,757 --> 00:02:55,711 ‫which makes the model component highly reusable. 49 00:02:55,711 --> 00:02:59,917 ‫So essentially when we do component composition, 50 00:02:59,917 --> 00:03:04,770 ‫we leave this hole or this empty slot in the component 51 00:03:04,770 --> 00:03:09,176 ‫ready to be filled with any other component that we want. 52 00:03:09,176 --> 00:03:14,176 ‫So let's say that later we needed another model window 53 00:03:14,190 --> 00:03:16,110 ‫somewhere else in the app, 54 00:03:16,110 --> 00:03:18,675 ‫but one that renders this error message. 55 00:03:18,675 --> 00:03:21,374 ‫Well, that's pretty easy now. 56 00:03:21,374 --> 00:03:24,570 ‫We just used the model component again 57 00:03:24,570 --> 00:03:28,878 ‫but this time we pass in the error component as a children. 58 00:03:28,878 --> 00:03:31,890 ‫And with this, we have also successfully 59 00:03:31,890 --> 00:03:34,840 ‫composed these two components together as well. 60 00:03:34,840 --> 00:03:39,358 ‫So formally component composition is the technique 61 00:03:39,358 --> 00:03:43,477 ‫of combining different components by using the children prop 62 00:03:43,477 --> 00:03:47,775 ‫or by explicitly defining components as props. 63 00:03:47,775 --> 00:03:49,921 ‫Now we use composition 64 00:03:49,921 --> 00:03:53,856 ‫for two big reasons or in two important situations. 65 00:03:53,856 --> 00:03:57,700 ‫First, when we want to create highly reusable 66 00:03:57,700 --> 00:04:01,374 ‫and flexible components such as the modal window 67 00:04:01,374 --> 00:04:04,962 ‫or really a million other reusable components 68 00:04:04,962 --> 00:04:06,494 ‫that we can think of. 69 00:04:06,494 --> 00:04:09,379 ‫And we do this really all the time. 70 00:04:09,379 --> 00:04:13,874 ‫Now, the second situation in which we can use composition is 71 00:04:13,874 --> 00:04:17,158 ‫in order to fix a prop drilling problem 72 00:04:17,158 --> 00:04:20,541 ‫like the one that we found in the previous video. 73 00:04:20,541 --> 00:04:23,799 ‫And this is actually great for creating layouts 74 00:04:23,799 --> 00:04:27,056 ‫as we will do in the next video. 75 00:04:27,056 --> 00:04:29,335 ‫Just keep in mind once again 76 00:04:29,335 --> 00:04:32,379 ‫that this is only possible because components 77 00:04:32,379 --> 00:04:36,256 ‫do not need to know their children in advance 78 00:04:36,256 --> 00:04:40,260 ‫which allows us to leave these empty slots inside 79 00:04:40,260 --> 00:04:43,532 ‫of them in the form of the children prop. 80 00:04:43,532 --> 00:04:47,613 ‫And with that being said, let's return to our project.