title: NextJS - Passing state to children as props in custom app
body: <p>I have this <code>./pages/_app.js</code> <a href="https://github.com/zeit/next.js#custom-app" rel="nofollow noreferrer">from the official docs</a>:</p>
  
  <pre><code>import App, { Container } from 'next/app'
  
  class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
      let pageProps = {}
  
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
      }
  
      return { pageProps }
    }
  
    render () {
      const { Component, pageProps } = this.props
  
      return (
        &lt;Container&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  export default MyApp
  </code></pre>
  
  <p>I want to pass state from MyApp to every page it renders, but can't figure how. I tried this:</p>
  
  <pre><code>const childProps = {
    ...
  }
  
  &lt;Container&gt;
    &lt;Component {...childProps} /&gt;
  &lt;/Container&gt;
  </code></pre>
  
  <p>and got an error:</p>
  
  <p><code>React.Children.only expected to receive a single React element child.</code></p>