We used a form of the render props pattern in the previous section where we leveraged the children prop. We used this to allow a consumer of our Tab component to render custom content for the tab heading. This is great, but what if we want to allow the consumer to render custom content in different sections of the component? In our Tabs component, we haven't allowed the consumer to render the content of the tab yet. We definitely want the consumer to be able to specify custom content for this, but how do we do this now that we've already used the children prop for the heading?

The answer is simple but not obvious at first. The answer is that, because props can be anything, they can be a function that renders content – just like the special children prop. These types of prop are called render props. We can have as many render props as we like, giving us the flexibility to allow multiple sections of a component to be rendered by the consumer.

We actually used a render prop in the last section when we used React context. The way we consumed the context was via a render prop.

Next, we'll complete our Tabs component by leveraging the render props pattern.