1 00:00:01,170 --> 00:00:04,380 ‫Let's now come back to a small use case 2 00:00:04,380 --> 00:00:09,213 ‫of the render props pattern to implement our tables body. 3 00:00:10,830 --> 00:00:15,830 ‫Now, we could use this table body just like this, 4 00:00:16,050 --> 00:00:19,650 ‫so we can do table.body 5 00:00:19,650 --> 00:00:23,670 ‫and then place all the content in there. 6 00:00:23,670 --> 00:00:25,950 ‫So, that would definitely be an option, 7 00:00:25,950 --> 00:00:30,120 ‫and then in here, simply render the children prop. 8 00:00:30,120 --> 00:00:33,360 ‫However, this is kind of ugly, I would say, 9 00:00:33,360 --> 00:00:36,690 ‫and we can do it any much better way. 10 00:00:36,690 --> 00:00:40,593 ‫So instead, what we want to do is, not this, 11 00:00:41,430 --> 00:00:45,750 ‫but actually have this as a self-closing element. 12 00:00:45,750 --> 00:00:50,370 ‫And then we simply want to pass in the cabins data. 13 00:00:50,370 --> 00:00:55,370 ‫So here, let's say that the data is cabins 14 00:00:55,650 --> 00:00:59,880 ‫and then we also need to pass in basically the instructions 15 00:00:59,880 --> 00:01:04,880 ‫on how this table.body should actually render the data. 16 00:01:04,950 --> 00:01:09,570 ‫And so that's where the render prop pattern comes into play. 17 00:01:09,570 --> 00:01:13,350 ‫So again, right now we are passing the data 18 00:01:13,350 --> 00:01:16,380 ‫into this table.body 19 00:01:16,380 --> 00:01:20,940 ‫but it doesn't really know what to do with this data, right? 20 00:01:20,940 --> 00:01:25,320 ‫I mean, it might know or it will know that this is an array, 21 00:01:25,320 --> 00:01:28,620 ‫and so it'll probably loop over that array, 22 00:01:28,620 --> 00:01:31,470 ‫but then it doesn't know what to do with it. 23 00:01:31,470 --> 00:01:36,470 ‫And so again, here we can now specify the render prop. 24 00:01:37,440 --> 00:01:40,530 ‫And so this is where we then tell the component 25 00:01:40,530 --> 00:01:42,960 ‫what to do with each cabin. 26 00:01:42,960 --> 00:01:46,893 ‫And so that's essentially this part right here. 27 00:01:48,030 --> 00:01:53,030 ‫So, let's grab that and then we can get rid of this, 28 00:01:53,430 --> 00:01:57,240 ‫and then I think that this looks a lot nicer, 29 00:01:57,240 --> 00:01:59,070 ‫and a lot cleaner as well. 30 00:01:59,070 --> 00:02:01,143 ‫So a lot more reusable even. 31 00:02:02,700 --> 00:02:06,720 ‫And so now let's, well not here, but here. 32 00:02:06,720 --> 00:02:08,673 ‫So let's come here and then, 33 00:02:10,320 --> 00:02:12,450 ‫actually not accept the children, 34 00:02:12,450 --> 00:02:16,053 ‫but the data and the render prop, 35 00:02:16,980 --> 00:02:21,980 ‫and so let's say return the styled body, 36 00:02:23,340 --> 00:02:27,180 ‫so this will just add some padding to the interior, 37 00:02:27,180 --> 00:02:32,160 ‫and then in here we will take the data and map over it. 38 00:02:32,160 --> 00:02:34,470 ‫And for each of them, all we will do 39 00:02:34,470 --> 00:02:37,500 ‫is to call the render prop. 40 00:02:37,500 --> 00:02:38,973 ‫And that's actually it. 41 00:02:40,770 --> 00:02:44,820 ‫Now, just to finish, let's also count for the possibility 42 00:02:44,820 --> 00:02:46,803 ‫that there is no data at all. 43 00:02:48,390 --> 00:02:51,840 ‫So let's say the data length is zero 44 00:02:51,840 --> 00:02:54,960 ‫or we could of course also just do this. 45 00:02:54,960 --> 00:02:58,530 ‫And so in this case, so for that, 46 00:02:58,530 --> 00:03:02,340 ‫we have the empty styled component here. 47 00:03:02,340 --> 00:03:07,340 ‫So let's say "No data to show at the moment." 48 00:03:10,410 --> 00:03:13,173 ‫And so now we are back to working. 49 00:03:14,640 --> 00:03:18,063 ‫Let's inspect the HTML itself. 50 00:03:19,260 --> 00:03:22,980 ‫And so indeed, now here we have this section. 51 00:03:22,980 --> 00:03:24,630 ‫So this body is a section 52 00:03:24,630 --> 00:03:28,890 ‫and it has this very tiny padding there. 53 00:03:28,890 --> 00:03:30,903 ‫So just a small visual effect. 54 00:03:31,770 --> 00:03:34,050 ‫So we have this header, which is a row 55 00:03:34,050 --> 00:03:35,463 ‫and we have this section, 56 00:03:36,450 --> 00:03:40,350 ‫which is basically a collection of some more rows. 57 00:03:40,350 --> 00:03:44,910 ‫And again, for this, we leveraged the render prop. 58 00:03:44,910 --> 00:03:47,970 ‫So sometimes it doesn't need to be something as big 59 00:03:47,970 --> 00:03:50,433 ‫as in the example, as I showed you earlier. 60 00:03:51,510 --> 00:03:54,900 ‫So when we first talked about the render props pattern 61 00:03:54,900 --> 00:03:56,970 ‫but even something like this 62 00:03:56,970 --> 00:04:00,120 ‫still qualifies as the render prop. 63 00:04:00,120 --> 00:04:04,530 ‫And so I really believe that definitely you should have 64 00:04:04,530 --> 00:04:07,410 ‫this kind of tool in your toolbox. 65 00:04:07,410 --> 00:04:09,960 ‫So, being able to do something like this 66 00:04:09,960 --> 00:04:13,290 ‫and also being able to understand it when you see it 67 00:04:13,290 --> 00:04:15,450 ‫in other developers code. 68 00:04:15,450 --> 00:04:20,160 ‫But anyway, with this we finish our reusable table. 69 00:04:20,160 --> 00:04:24,240 ‫And so next up, let's move on to still work 70 00:04:24,240 --> 00:04:26,850 ‫with some more compound components 71 00:04:26,850 --> 00:04:30,540 ‫where we will finally fix this part right here. 72 00:04:30,540 --> 00:04:33,990 ‫So, building a reusable menu component. 73 00:04:33,990 --> 00:04:35,403 ‫So, see you there soon.