title: React Context Not Defined
body: <p>I have not been able to correctly use Context in my React app. Most of the docs are using class based components and I am attempting to do this with functional components.</p>
  <p>The error states that <code>AppContext</code> is not defined.</p>
  <p><code>App.js</code> and <code>Header.js</code> are in different files.</p>
  <p>If I add <code>console.log(React.useContext(AppContext))</code> immediately after <code>&lt;AppContext.Provider value='AppName'&gt;</code> The correct answer is logged. However, <code>AppContext</code> is not defined in <code>Header</code> here:</p>
  <pre><code>const app = useContext(AppContext);
  </code></pre>
  <p>Here is the current state of the code:</p>
  <p><code>App.js</code></p>
  <pre><code>import React, { createContext } from 'react';
  import Header from './Header';
  
  const app = 'AppName';
  const AppContext = createContext(app);
  
  export default function App() {
  
      return (
          &lt;AppContext.Provider value={ app }&gt;
            {console.log(React.useContext(AppContext))} // returns 'AppName'
            &lt;Header /&gt;
          &lt;/AppContext.Provider&gt;
      );
  }
  </code></pre>
  <p><code>Header.js</code></p>
  <pre><code>import React, { useContext } from 'react';
  
  export default function Header() {
      const app = useContext(AppContext);
      console.log(app) // undefined because AppContext not defined
      return (
          &lt;header&gt;
              { app }
          &lt;/header&gt;
      );
  }
  </code></pre>