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...