Enhancement to Function as Prop Component

[TonyGravagno]

The initial text is understandable, but I recommend a different approach:

Replace

Exactly passing a render callback function to a component is not the issue. The issue is the function as child component implementation chose to use the prop children.

So how could you pass a render callback function to a component in a clean manner?

You would need to name your prop meaningful.

with

Passing a render callback using the function as child component pattern is very common. But that approach is limited, in that there is only one 'children' property in the component. A cleaner and more versatile approach is to pass functions to the component as named props.

This is how common element events are handled, with props-as-attributes like onclick, and onchange, and onsubmit.

Here is an example with a named property passing a function in-line to the Foo component:

...