Receiving Props.children Is Not A Function

When attempting to pass custom props from layout to children, I am receiving the following: TypeError: props.children is not a function Layout (functional component summary) import

Solution 1:

Render function Pattern

To use render function pattern you need to modified your child component as

importReactfrom"react"importLayoutfrom'../components/layout'exportdefault () => {
    return (
        <Layout>
            {props => (<main><h1>{props.title}</h1></main>)}
        </Layout>
    )
}