title: React - sending props to component
body: <p>I'm using React or Gatsby for a static website. A subpages need to send an prop or a variable(bool) to the main layout component, to determinme if we show a Hero image or not.  </p>
  
  <p>I got the following code (simplified) for the page:</p>
  
  <pre><code>import React from 'react'
  import { graphql } from 'gatsby'
  import Layout from '../components/layout'
  
  import dividerIcon from '../images/hair-cut-tool.svg'
  
  const IndexPage = ({ data }) =&gt; (
    &lt;Layout showHero={true}&gt;
      &lt;div className="divider-wrapper"&gt;
        &lt;div className="divider"&gt;
          &lt;img alt="divider" src={dividerIcon} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  )
  
  export default IndexPage
  </code></pre>
  
  <p>How can I "get" the prop in may Layout.js?<br>
  I'm sending it with "" but I have no idea, how to get this variable and use it.  </p>
  
  <p>As for right now the Layout.js looks like this:  </p>
  
  <pre><code>const Layout = ({ children }) =&gt; (
    &lt;StaticQuery
      query={graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
            }
          }
          heroImgLogo: file(relativePath: { eq: "logo.png" }) {
              childImageSharp {
                  fixed(width: 300) {
                      ...GatsbyImageSharpFixed_withWebp_noBase64
                  }
              }
          }
        }
      `}
      render={data =&gt; (
        &lt;&gt;
          &lt;div className="site"&gt;
            {(children.showHero) ? 
              &lt;Hero logoImg={data.heroImgLogo.childImageSharp.fixed} /&gt;
              : 
            null }
  
            &lt;div className="site-content container"&gt;{children}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/&gt;
      )}
    /&gt;
  );
  
  Layout.propTypes = {
    children: PropTypes.node.isRequired,
  }
  
  export default Layout  
  </code></pre>
  
  <p>yet again, simplified.  </p>
  
  <p>I tried to children.showHero but it wasn't the right approach, I guess.<br>
  Any hints?</p>