1 00:00:01,170 --> 00:00:03,510 ‫Okay, and so now, 2 00:00:03,510 --> 00:00:05,910 ‫let's use the render props pattern 3 00:00:05,910 --> 00:00:09,423 ‫to solve the problem that we identified earlier. 4 00:00:11,010 --> 00:00:14,010 ‫So the render prop pattern is all 5 00:00:14,010 --> 00:00:17,040 ‫about passing in a prop called render, 6 00:00:17,040 --> 00:00:20,094 ‫which is a function that a component uses 7 00:00:20,094 --> 00:00:25,094 ‫to know what it should render and how to do it. 8 00:00:25,410 --> 00:00:29,057 ‫So essentially, whenever you can't directly pass 9 00:00:29,057 --> 00:00:32,610 ‫in JSX with the children prop 10 00:00:32,610 --> 00:00:35,518 ‫because you need to give the component a description 11 00:00:35,518 --> 00:00:37,695 ‫on how to render something, 12 00:00:37,695 --> 00:00:42,450 ‫then you need to reach for this render props pattern. 13 00:00:42,450 --> 00:00:44,597 ‫But that still sounds a bit confusing 14 00:00:44,597 --> 00:00:47,163 ‫and so let's just do it. 15 00:00:49,110 --> 00:00:52,560 ‫So as I was saying, here, now we will pass 16 00:00:52,560 --> 00:00:57,496 ‫in a prop called render, which will be a function. 17 00:00:57,496 --> 00:01:00,450 ‫And what will this function be? 18 00:01:00,450 --> 00:01:03,034 ‫Well, again, it will be the instructions 19 00:01:03,034 --> 00:01:05,790 ‫of how to render something. 20 00:01:05,790 --> 00:01:08,913 ‫And in this case, that's actually pretty simple. 21 00:01:10,650 --> 00:01:14,970 ‫So for our list of products, we know that for each product 22 00:01:14,970 --> 00:01:19,970 ‫we want to render this product item component, right. 23 00:01:20,220 --> 00:01:22,155 ‫So this is what we want to render 24 00:01:22,155 --> 00:01:25,320 ‫and here is how we want to do that. 25 00:01:25,320 --> 00:01:27,273 ‫So again, for each product, 26 00:01:27,273 --> 00:01:30,180 ‫we want to render one product item. 27 00:01:30,180 --> 00:01:33,592 ‫And so, let's grab this entire function, 28 00:01:33,592 --> 00:01:37,078 ‫which is indeed a function, right. 29 00:01:37,078 --> 00:01:42,078 ‫So we grab that and place that here in the render prop. 30 00:01:44,640 --> 00:01:48,418 ‫And so then here, of course, we need to receive that prop. 31 00:01:48,418 --> 00:01:51,540 ‫So besides the title and the items, 32 00:01:51,540 --> 00:01:56,460 ‫we now want this prop called render. 33 00:01:56,460 --> 00:01:59,615 ‫And so then here we place that, 34 00:01:59,615 --> 00:02:02,760 ‫and there we go. 35 00:02:02,760 --> 00:02:07,350 ‫So now our list works exactly the same way as before 36 00:02:07,350 --> 00:02:10,590 ‫but we basically inverted the control of how 37 00:02:10,590 --> 00:02:14,340 ‫it should render to the user of the component. 38 00:02:14,340 --> 00:02:17,105 ‫So this is what we call inversion of control 39 00:02:17,105 --> 00:02:19,099 ‫and it's an important principle 40 00:02:19,099 --> 00:02:22,203 ‫in software development in general. 41 00:02:23,250 --> 00:02:28,110 ‫So again, this list now no longer knows actually 42 00:02:28,110 --> 00:02:31,020 ‫what it is rendering, right. 43 00:02:31,020 --> 00:02:34,200 ‫It has no idea what will happen here 44 00:02:34,200 --> 00:02:38,820 ‫inside this map function for each of the display items. 45 00:02:38,820 --> 00:02:41,845 ‫All that it knows is that it received dysfunction 46 00:02:41,845 --> 00:02:44,100 ‫and that it will call dysfunction 47 00:02:44,100 --> 00:02:46,710 ‫for each items in the array. 48 00:02:46,710 --> 00:02:47,880 ‫That's it. 49 00:02:47,880 --> 00:02:50,547 ‫And so now that this component doesn't know anymore 50 00:02:50,547 --> 00:02:52,724 ‫what it is actually rendering, 51 00:02:52,724 --> 00:02:56,863 ‫and it doesn't even care about what it is rendering, 52 00:02:56,863 --> 00:03:01,863 ‫well, it then makes that very easy to reuse the component 53 00:03:02,400 --> 00:03:06,510 ‫for other render props, right. 54 00:03:06,510 --> 00:03:11,265 ‫So now we can just grab this list right here 55 00:03:11,265 --> 00:03:15,090 ‫and we can reuse it for something else. 56 00:03:15,090 --> 00:03:17,403 ‫And in particular for our companies. 57 00:03:19,200 --> 00:03:23,640 ‫So here, let's call them companies. 58 00:03:23,640 --> 00:03:26,730 ‫And then for each company 59 00:03:26,730 --> 00:03:31,730 ‫what we want to render this time is a company item, right. 60 00:03:34,050 --> 00:03:39,050 ‫And then here as the key, we pass in company dot. 61 00:03:39,420 --> 00:03:40,820 ‫Well, what do we have there? 62 00:03:42,390 --> 00:03:45,679 ‫So probably we have a company name, right. 63 00:03:45,679 --> 00:03:47,220 ‫And then here, 64 00:03:47,220 --> 00:03:50,100 ‫this company item does not receive the product 65 00:03:50,100 --> 00:03:55,100 ‫but of course instead a company. 66 00:03:55,200 --> 00:04:00,200 ‫So company and then company. 67 00:04:01,770 --> 00:04:06,770 ‫And on top of that, it does even receive some other prop. 68 00:04:07,320 --> 00:04:10,860 ‫So we can also pass in the default visibility. 69 00:04:10,860 --> 00:04:14,950 ‫So let's set that to false just to show how different 70 00:04:19,230 --> 00:04:21,573 ‫these two lists actually are. 71 00:04:22,500 --> 00:04:25,203 ‫So here I want false not face. 72 00:04:26,520 --> 00:04:30,540 ‫And they should of course not be a string 73 00:04:30,540 --> 00:04:31,840 ‫but really a (indistinct). 74 00:04:33,360 --> 00:04:34,230 ‫Now, right. 75 00:04:34,230 --> 00:04:38,040 ‫And so watch the result that we got. 76 00:04:38,040 --> 00:04:41,160 ‫So all the logic that we had here before 77 00:04:41,160 --> 00:04:43,650 ‫about collapsing the list is the same 78 00:04:43,650 --> 00:04:48,650 ‫in these two lists now, so we can collapse both of them. 79 00:04:48,660 --> 00:04:51,527 ‫And of course, we also have this button down here. 80 00:04:51,527 --> 00:04:55,053 ‫So then only three of them are being shown. 81 00:04:56,880 --> 00:05:00,531 ‫So essentially we achieved our goal of reusing all 82 00:05:00,531 --> 00:05:05,531 ‫of this (indistinct) logic and also the UI itself. 83 00:05:05,730 --> 00:05:09,911 ‫So basically this title here, this button that we have 84 00:05:09,911 --> 00:05:14,911 ‫and yeah, also that other button down there. 85 00:05:15,990 --> 00:05:18,330 ‫So we were able to share all of that 86 00:05:18,330 --> 00:05:20,280 ‫among these two lists here, 87 00:05:20,280 --> 00:05:24,090 ‫simply by passing in the render prop again. 88 00:05:24,090 --> 00:05:27,720 ‫And so therefore, with this, this list no longer cares 89 00:05:27,720 --> 00:05:29,850 ‫about what it is rendering 90 00:05:29,850 --> 00:05:32,850 ‫and simply follows the instructions right here. 91 00:05:32,850 --> 00:05:35,604 ‫And so those instructions in this case are simply 92 00:05:35,604 --> 00:05:39,720 ‫what should happen for each of the items 93 00:05:39,720 --> 00:05:41,163 ‫in the company's array. 94 00:05:42,120 --> 00:05:45,330 ‫So next, in this case here, that for each company 95 00:05:45,330 --> 00:05:49,950 ‫one company item should be rendered with these three props. 96 00:05:49,950 --> 00:05:52,646 ‫While here, one product item component should be rendered 97 00:05:52,646 --> 00:05:55,410 ‫with these two props. 98 00:05:55,410 --> 00:05:58,950 ‫And so again, fundamentally different what we're doing here 99 00:05:58,950 --> 00:06:01,110 ‫and what we're doing here, 100 00:06:01,110 --> 00:06:04,830 ‫but the important part is that we couldn't only have passed 101 00:06:04,830 --> 00:06:07,350 ‫in this component right here, 102 00:06:07,350 --> 00:06:10,666 ‫because then our list component wouldn't have any idea 103 00:06:10,666 --> 00:06:13,620 ‫about what to do with it. 104 00:06:13,620 --> 00:06:16,344 ‫So it wouldn't even know what this company here is 105 00:06:16,344 --> 00:06:20,370 ‫if it wasn't for this function right here. 106 00:06:20,370 --> 00:06:23,130 ‫So the render prop really always needs 107 00:06:23,130 --> 00:06:26,853 ‫to be a function similar to this one. 108 00:06:27,750 --> 00:06:31,110 ‫Now, okay, so I hope this made sense and 109 00:06:31,110 --> 00:06:35,490 ‫that you understood the logic behind what we just did here. 110 00:06:35,490 --> 00:06:37,680 ‫Now, just notice that the render prop 111 00:06:37,680 --> 00:06:39,804 ‫used to be really the main way 112 00:06:39,804 --> 00:06:44,220 ‫of sharing (indistinct) logic across multiple components. 113 00:06:44,220 --> 00:06:47,640 ‫So that was before we had React hooks, 114 00:06:47,640 --> 00:06:50,625 ‫but now that we do have them, the render props is not 115 00:06:50,625 --> 00:06:55,625 ‫that used anymore except for situations like this one 116 00:06:55,860 --> 00:07:00,150 ‫and also a few other even more complex situations. 117 00:07:00,150 --> 00:07:03,030 ‫So that's why here I'm not gonna go really deep 118 00:07:03,030 --> 00:07:04,410 ‫into the details 119 00:07:04,410 --> 00:07:07,980 ‫and also really compare all the different patterns. 120 00:07:07,980 --> 00:07:11,070 ‫Again, because custom hooks are now usually 121 00:07:11,070 --> 00:07:14,430 ‫the way to go when we want to share logic. 122 00:07:14,430 --> 00:07:16,710 ‫But that actually doesn't stop us 123 00:07:16,710 --> 00:07:20,580 ‫from looking at yet another pattern in the next lecture, 124 00:07:20,580 --> 00:07:23,820 ‫which is called the higher order component pattern, 125 00:07:23,820 --> 00:07:27,210 ‫which is even less used, but still very important 126 00:07:27,210 --> 00:07:28,710 ‫for you to know. 127 00:07:28,710 --> 00:07:30,870 ‫Even though I didn't even include it 128 00:07:30,870 --> 00:07:35,130 ‫in that initial slide at the beginning of the section. 129 00:07:35,130 --> 00:07:36,787 ‫But anyway, let's now move there 130 00:07:36,787 --> 00:07:39,423 ‫and check out this other pattern.