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

import React from "react"
import Layout from '../components/layout'

export default () => {
    return (
        <Layout>
            {props => (<main>
                <h1>{props.title}</h1>
            </main>)}
        </Layout>
    )
}