‫Let's now come back to a small use case
‫of the render props pattern to implement our tables body.
‫Now, we could use this table body just like this,
‫so we can do table.body
‫and then place all the content in there.
‫So, that would definitely be an option,
‫and then in here, simply render the children prop.
‫However, this is kind of ugly, I would say,
‫and we can do it any much better way.
‫So instead, what we want to do is, not this,
‫but actually have this as a self-closing element.
‫And then we simply want to pass in the cabins data.
‫So here, let's say that the data is cabins
‫and then we also need to pass in basically the instructions
‫on how this table.body should actually render the data.
‫And so that's where the render prop pattern comes into play.
‫So again, right now we are passing the data
‫into this table.body
‫but it doesn't really know what to do with this data, right?
‫I mean, it might know or it will know that this is an array,
‫and so it'll probably loop over that array,
‫but then it doesn't know what to do with it.
‫And so again, here we can now specify the render prop.
‫And so this is where we then tell the component
‫what to do with each cabin.
‫And so that's essentially this part right here.
‫So, let's grab that and then we can get rid of this,
‫and then I think that this looks a lot nicer,
‫and a lot cleaner as well.
‫So a lot more reusable even.
‫And so now let's, well not here, but here.
‫So let's come here and then,
‫actually not accept the children,
‫but the data and the render prop,
‫and so let's say return the styled body,
‫so this will just add some padding to the interior,
‫and then in here we will take the data and map over it.
‫And for each of them, all we will do
‫is to call the render prop.
‫And that's actually it.
‫Now, just to finish, let's also count for the possibility
‫that there is no data at all.
‫So let's say the data length is zero
‫or we could of course also just do this.
‫And so in this case, so for that,
‫we have the empty styled component here.
‫So let's say "No data to show at the moment."
‫And so now we are back to working.
‫Let's inspect the HTML itself.
‫And so indeed, now here we have this section.
‫So this body is a section
‫and it has this very tiny padding there.
‫So just a small visual effect.
‫So we have this header, which is a row
‫and we have this section,
‫which is basically a collection of some more rows.
‫And again, for this, we leveraged the render prop.
‫So sometimes it doesn't need to be something as big
‫as in the example, as I showed you earlier.
‫So when we first talked about the render props pattern
‫but even something like this
‫still qualifies as the render prop.
‫And so I really believe that definitely you should have
‫this kind of tool in your toolbox.
‫So, being able to do something like this
‫and also being able to understand it when you see it
‫in other developers code.
‫But anyway, with this we finish our reusable table.
‫And so next up, let's move on to still work
‫with some more compound components
‫where we will finally fix this part right here.
‫So, building a reusable menu component.
‫So, see you there soon.