title: Next.JS -- getInitialProps to pass props and state to child components via ContextProvider
body: <p>I am using <code>getInitialProps()</code> in <code>_App.js</code> to grab some api data and I want to pass that data down as props to my other components via React Context. I want to initialize the Context Provider with state via the constructor.</p>
  
  <p>First I initialize context via <code>createContext()</code>.</p>
  
  <p><code>config/Context.js</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createContext } from 'react';
  const Context = createContext();
  export default Context;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then I create Context.Provider in its own component using constructor to initialize state. </p>
  
  <p><code>provider/ContextProvider.js</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import Context from '../config/Context';
  
  class ContextProvider extends Component {
    constructor(props) {
      super(props);
      
      this.state = {
        filters: {
          active: true,
          headerActive: false
        }
      };
    }
  
    render() {
      return (
        &lt;Context.Provider&gt;
          {this.props.children}
        &lt;/Context.Provider&gt;
      );
    }
  }
  
  export default ContextProvider;</code></pre>
  </div>
  </div>
   </p>
  
  <p>In <code>_app.js</code> I make an API call within <code>getInitialProps()</code> and pass that data into the Context Provider. </p>
  
  <p><code>pages/_app.js</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import App, { Container } from 'next/app';
  import ContextProvider from '../provider/ContextProvider';
  import fetch from 'isomorphic-unfetch';
  
  export default class MyApp extends App {
    static async getInitialProps() {
      const res = await fetch('https://node-hnapi.herokuapp.com/news');
      let data = await res.json();
  
      console.log(data)
      return { articles: data }
    }
  
    render () {
      const { Component, pageProps } = this.props;
      
      return (
        &lt;Container&gt;
          &lt;ContextProvider value={{ articles: this.props.articles}}&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/ContextProvider&gt;
        &lt;/Container&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>At this point I assume that I would have access to context via <code>Context.Consumer</code> or a hook like <code>useContext()</code> but context is undefined in the following component:</p>
  
  <p><code>components/ArticleList.js</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import Context from '../config/Context';
  
  const ArticleList = () =&gt; {
    const generateArticles = () =&gt; {
      const context = React.useContext(Context);
      console.log(context, 'context') // Context is undefined here
      // return context.articles.map(article =&gt; &lt;p&gt;{article.title}&lt;/p&gt;)
      // Error: Cannot read property 'articles' because context is undefined
    }
  
    return (
      &lt;div&gt;
        &lt;h3&gt;Article List&lt;/h3&gt;
        {generateArticles()}
      &lt;/div&gt;
    );
  };
  
  export default ArticleList;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why is context undefined in <code>components/ArticleList.js</code>? I tried passing context into the component via <code>Context.Consumer</code> and I got the same result.</p>
  
  <p>Here is repo replicating the issue: <a href="https://github.com/joelhoelting/next-context-api-test" rel="nofollow noreferrer">https://github.com/joelhoelting/next-context-api-test</a></p>