React children functional props not working - reactjs

Question

I am new to ReactJS, the following error reported in console:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
What is wrong?
function Test({children}) {
return (
<div>
{children}
</div>
);
}
export default function App() {
return (
<div className="App">
<Test> {() => (<h1>Title</h1>)}</Test>
</div>
);
}

Answer 1

Part of the render props pattern is that the child component calls the children as a function in order to render it.
If you expect to have either normal ReactNodes or a function, you'll need to check to see if the children is a function to determine how to use it.
If you expect children will always be a function you can just call it without the type check first, though there will be an error if you pass in something that isn't callable.
function Test({children}) {
return (
<div>
{typeof children==='function'? children() : children}
</div>
);
}
function App() {
return (
<div className="App">
<Test>{() => (<h1>Title</h1>)}</Test>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
In addition, you need to make sure there's no extra whitespace before the curly braces to set up the render props function, otherwise it is interpreted as ['', function(){}] which won't work:
<Test> {() => (<h1>Title</h1>)}</Test>

Answer 2

export default function App() {
return (
<div className="App">
<Test><h1>Title</h1></Test> // Change hehre
</div>
);
}