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.
Here's how you could change the Foo example to pass a function as a prop:
<Foo hello={(name) => <div>`hello from ${name}`</div>} />
And here's another example, hello is created outside of the JSX (a better practice):
const hello = (name) => {
return <div>`hello from ${name}`</div>
}
<Foo hello={hello} />
And this time, Foo makes a lot more sense:
const Foo = ({ hello }) => {
return hello('foo')
}
Notice how this is much more descriptive? The code is self-documenting. You can say to yourself, "Foo calls a hello function" instead of "Foo calls something".