Using render props

In this section, we will learn about the render props pattern and use it to allow the consumer of the component to render items within the checklist component.

Understanding the render props pattern

A way of making a component highly reusable is to allow the consumer to render internal elements within it. The children prop on a button element is an example of this because it allows us to specify any button content we like:

<button>We can specify any content here</button>

The render props pattern allows us to use a prop other than children to provide this capability. This is useful when the children prop is already used for something else, as in the following example:

<Modal heading={<h3>Enter Details</h3>}>
  Some content
</Modal>

Here, heading is a render prop in a Modal component.

Render props are useful when allowing the consumer to render elements associated with the data passed into the component...