title: How to provide and consume context in the same component?
body: <p>I'm using react context api for my game app and I created a GameContext.js</p>
  
  <pre><code>import React, { useState, createContext } from 'react';
  
  const GameContext = createContext();
  const GameProvider = ({ children }) =&gt; {
    const [startgame, setStartgame] = useState(false);
  
    return (
      &lt;GameContext.Provider value={[startgame, setStartgame]}&gt;
        {children}
      &lt;/GameContext.Provider&gt;
    );
  };
  
  export { GameContext, GameProvider };
  </code></pre>
  
  <p>And in the App.js I provide the context.</p>
  
  <pre><code>import { GameProvider, GameContext } from './context/GameContext';
  
  const App = () =&gt; {
      console.log(useContext(GameContext), 'Gamecontext');
      return (
        &lt;GameProvider&gt;
  
          &lt;div className="App"&gt;
              {!startgame ? &lt;WelcomeScreen /&gt;
          : &lt;GameScreen /&gt;}
          &lt;/div&gt;
        &lt;/GameProvider&gt;
      );
    };
    export default App;
  </code></pre>
  
  <p>This doesnt work because startgame is not accessible in App.js.<br>
  Also, I noticed the <code>useContext(GameContext)</code> is <code>undefined</code>. I want to use the <code>startgame</code> value in App.js, but I cant destructure an undefined value.
  How can one provide and consume the context in the same component App.js? Is this the right way or am  missing something?</p>