Gatsby: What does "children: PropTypes.func" mean?

[heyalbert]

For what is this?

Layout.propTypes = {
  children: PropTypes.func,
}

It's part of the layout.js file. I'm sorry but I couldn't find any information about it in the documentation.

Here is my entire layout.js file:

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'

import Header from '../components/header'



const Layout = ({ children, data }) => (
  <div>
    <Helmet
      title={data.site.siteMetadata.title}
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
        { property: 'og:type', content: 'website' }
      ]}
    />
    <Header siteTitle={data.site.siteMetadata.title} />
    <div>
      {children()}
    </div>
  </div>
)

Layout.propTypes = {
  children: PropTypes.func,
}

export default Layout

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
    description
      }
    }
  }
`

[bogdancss]

I believe it's there for type checking. For more info check React Typechecking

[abrad45]

It's a way to tell React (and your future self) what type of data you expect here. For instance, if you had:

Component.propTypes = {
  num: PropTypes.number.isRequired,
}

And don't pass a num prop into component, you'll get an error telling you that the component expects you to pass one in (.isRequired). Similarly, if you pass in "4" (instead of 4) it'll also tell you. These messages only appear in the develop environment and are a feature of React, not Gatsby.

Hope this helps!