title: React New Context API - Access Existing Context across Multiple Files
body: <p>All the examples I've seen of the new Context API in React are in a single file, e.g. <a href="https://github.com/wesbos/React-Context" rel="noreferrer">https://github.com/wesbos/React-Context</a>.</p>
  
  <p>When I try to get it working across multiple files, I'm clearly missing something.</p>
  
  <p>I'm hoping to make a <code>GlobalConfiguration</code> component (the <code>MyProvider</code> below) create and manage the values in the context, ready for any child component (<code>MyConsumer</code> below) read from it.</p>
  
  <h2>App.js</h2>
  
  <pre><code>render() {
      return (
          &lt;MyProvider&gt;
              &lt;MyConsumer /&gt;
          &lt;/MyProvider&gt;
      );
  }
  </code></pre>
  
  <h2>provider.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  
  const MyContext = React.createContext('test');
  
  export default class MyProvider extends Component {
  
      render() {
          return (
              &lt;MyContext.Provider
                  value={{ somevalue: 1 }}&gt;
                  {this.props.children}
              &lt;/MyContext.Provider &gt;
          );
      }
  }
  </code></pre>
  
  <h2>consumer.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  
  const MyContext = React.createContext('test');
  
  export default class MyConsumer extends Component {
  
      render() {
  
          return (
              &lt;MyContext.Consumer&gt;
                  {(context) =&gt; (
                      &lt;div&gt;{context.state.somevalue}&lt;/div&gt;
                  )}
              &lt;/MyContext.Consumer&gt;
          );
      }
  }
  </code></pre>
  
  <p>Unfortunately that fails with this in the console:</p>
  
  <p><code>consumer.js:12 Uncaught TypeError: Cannot read property 'somevalue' of undefined</code></p>
  
  <p>Have I completely missed the point? Is there documentation or an example of how this works across multiple files?</p>