title: React 16.3 Context API -- Provider/Consumer issues
body: <p>I have been doing some experiment on React 16.3.1 ContextAPI. and I encountered into something that I couldn't fathom. I was hoping I could use your help.</p>
  
  <p><strong>Note:</strong> The problem have been solved but, its not the solution I am looking for. </p>
  
  <p>Let start with first experiment on multiple components within same file  <strong>Index.js</strong>.</p>
  
  <pre><code>import React, { Component, createContext } from 'react';
  const { Provider, Consumer } = createContext();
  
  class AppProvider extends Component {
    state = {
      name: 'Superman',
      age: 100
    };
  
    render() {
      const increaseAge = () =&gt; {
        this.setState({ age: this.state.age + 1 });
      };
  
      const decreaseAge = () =&gt; {
        this.setState({ age: this.state.age - 1 });
      };
      return (
        &lt;Provider
          value={{
            state: this.state,
            increaseAge,
            decreaseAge
          }}
        &gt;
          {this.props.children}
        &lt;/Provider&gt;
      );
    }
  }
  
  class Person extends Component {
    render() {
      return (
        &lt;div className="person"&gt;
          &lt;Consumer&gt;
            {context =&gt; (
              &lt;div&gt;
                &lt;p&gt;I'm {context.state.name}&lt;/p&gt;
                &lt;p&gt;I'm {context.state.age}&lt;/p&gt;
                &lt;button onClick={context.increaseAge}&gt;
                  &lt;span&gt;+&lt;/span&gt;
                &lt;/button&gt;
                &lt;button onClick={context.decreaseAge}&gt;
                  &lt;span&gt;-&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            )}
          &lt;/Consumer&gt;
        &lt;/div&gt;
      );
    }
  }
  
  class App extends Component {
    render() {
        return (
          &lt;AppProvider&gt;
            &lt;div className="App"&gt;
              &lt;p&gt;Imma Apps&lt;/p&gt;
              &lt;Person /&gt;
            &lt;/div&gt;
          &lt;/AppProvider&gt;
        );
      }
    }
  
  export default App;
  </code></pre>
  
  <p>As result, this render out perfect without any error. I am able to see name (<strong>Superman</strong>) and age (<strong>100</strong>). I am able to increase and decrease age by 1. </p>
  
  <p>As you can see, I have imported <code>{createContext}</code> from react then created <code>{Provider, Consumer}</code>. Wrapped <code>&lt;Provider&gt;</code> with state value and <code>&lt;Consumer&gt;</code>. </p>
  
  <p>Next Experiment, was exact copy each component from <strong>index.js</strong> and paste them separately into their own files.</p>
  
  <p><strong>AppProvider.js</strong></p>
  
  <pre><code>import React, { Component, createContext } from 'react';
  const { Provider, Consumer } = createContext();
  
  class AppProvider extends Component {
    state = {
      name: 'Superman',
      age: 100
    };
  
    render() {
      const increaseAge = () =&gt; {
        this.setState({ age: this.state.age + 1 });
      };
  
      const decreaseAge = () =&gt; {
        this.setState({ age: this.state.age - 1 });
      };
      return (
        &lt;Provider
          value={{
            state: this.state,
            increaseAge,
            decreaseAge
          }}
        &gt;
          {this.props.children}
        &lt;/Provider&gt;
      );
    }
  }
  export default AppProvider;
  </code></pre>
  
  <p><strong>Person.js</strong></p>
  
  <pre><code>import React, { Component, createContext } from 'react';
  const { Provider, Consumer } = createContext();
  
  class Person extends Component {
    render() {
      return (
        &lt;div className="person"&gt;
          &lt;Consumer&gt;
            {context =&gt; (
              &lt;div&gt;
                &lt;p&gt;I'm {context.state.name}&lt;/p&gt;
                &lt;p&gt;I'm {context.state.age}&lt;/p&gt;
                &lt;button onClick={context.increaseAge}&gt;
                  &lt;span&gt;+&lt;/span&gt;
                &lt;/button&gt;
                &lt;button onClick={context.decreaseAge}&gt;
                  &lt;span&gt;-&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            )}
          &lt;/Consumer&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Person;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component, createContext } from 'react';
  const { Provider, Consumer } = createContext();
  
  class App extends Component {
    render() {
        return (
          &lt;AppProvider&gt;
            &lt;div className="App"&gt;
              &lt;p&gt;Imma Apps&lt;/p&gt;
              &lt;Person /&gt;
            &lt;/div&gt;
          &lt;/AppProvider&gt;
        );
      }
    }
  
  export default App;
  </code></pre>
  
  <p>As result, I am getting error - <strong>TypeError: Cannot read property 'state' of undefined</strong>. <br /></p>
  
  <p>I am unable to grasp what the exactly error was.. All I did was copy and paste each into files without changing any syntax. </p>
  
  <p>Although, Alternative method was to create a new file and add syntax following...</p>
  
  <p><strong>Context.js</strong></p>
  
  <pre><code>import { createContext } from 'react';
  const Context = createContext();
  export default Context;
  </code></pre>
  
  <p>Then go into each files (<strong>AppProvider.js</strong>. <strong>Person.js</strong> and <strong>App.js</strong>) and replace...</p>
  
  <p><code>import React, { Component, createContext } from 'react';</code><br/>
  <code>const { Provider, Consumer } = createContext();</code>'</p>
  
  <p>...into...</p>
  
  <p><code>import Context from './Context.js';</code>. Also replace... <code>&lt;Provider&gt;</code> into <code>&lt;Context.Provider&gt;</code> and <code>&lt;Consumer&gt;</code> into <code>&lt;Context.Consumer&gt;</code>. </p>
  
  <p>And this killed the error.  However, this is not the solution I am looking for.  I wanted to use <code>&lt;Provider&gt;</code> tag instead of <code>&lt;Context.Provider&gt;</code>.</p>
  
  <p>Question is, Why am I getting this error? </p>
  
  <p>Why am I unable to use this method...</p>
  
  <p><code>import React, { Component, createContext } from 'react';</code><br/>
  <code>const { Provider, Consumer } = createContext();</code>'</p>
  
  <p>for each components in separate files so I could use <code>&lt;Provider&gt;</code> tag ?  </p>
  
  <p>Are there any way around to get the solution I'm looking for? </p>
  
  <p>Your help is appreciated and Thanks in advance.</p>