Receiving props.children is not a function

Question

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 React, { useState } from 'react'
import { useStaticQuery, graphql } from 'gatsby'

export default (props) => {
    const {site} = useStaticQuery(
        graphql`
            {
                site {
                    siteMetadata {
                        title
                    }
                }
            }
        `
    )
    const globals = {title: site.siteMetadata.title}

    return (
        <>
            {props.children({...props, ...globals})}
        </>
    )
}

Child (also a functional component)

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

export default () => {
    return (
        <Layout>
            <main>
                <h1>*site title will go here</h1>
            </main>
        </Layout>
    )
}

@AtinSingh Yes. I only receive the error when calling as a function to include custom "globals" props. — Ryan Prentiss, Oct 30 '19 at 06:29
Can you share the code of parent component? Is it a class or functional component? — Atin Singh, Oct 30 '19 at 06:32
Does this answer your question? [How to pass props to {this.props.children}](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — Joseph D., Oct 30 '19 at 06:36
Maybe this will help you? https://stackoverflow.com/questions/49891935/props-children-in-react-cannot-be-a-stateless-component — Atin Singh, Oct 30 '19 at 06:38
I was viewing this post initially, to no avail. https://stackoverflow.com/questions/48725557/pass-props-from-layout-to-children-in-gatsby — Ryan Prentiss, Oct 30 '19 at 06:41
I think you should populate the children like this `Children.toArray(props.children)` instead of calling the props.children(), then pass the props using that — keysl, Oct 30 '19 at 07:14
This guy somehow uses children as a function. I can't figure it out. https://stackoverflow.com/a/54534202/916008 — Ryan Prentiss, Oct 30 '19 at 07:26

Deval Chaudhari · Accepted Answer · 2019-10-30T07:35:50.760

11

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>
    )
}

edited Oct 30 '19 at 07:35

answered Oct 30 '19 at 07:18

Deval Chaudhari

161
1
6

Thank you. I really need to educate myself on this format. – Ryan Prentiss Oct 30 '19 at 08:32

Receiving props.children is not a function

1 Answers1

Linked