title: How to pass multiple states through react context api
body: <p>I'm creating a react game app and I want to pass state across multiple components. For that purpose I'm trying the react context api for the first time.
  So this is my GameContext.js</p>
  
  <pre><code>import React, { useState, createContext } from 'react';
  
  const GameContext = createContext();
  
  const GameProvider = ({ children }) =&gt; {
    const [name, setName] = useState('');
    const [color, setColor] = useState('');
    const [startgame, setStartgame] = useState(false);
  
  
    return (
      &lt;GameContext.Provider value={[name, setName]}&gt;
        {children}
      &lt;/GameContext.Provider&gt;
    );
  };
  
  export { GameContext, GameProvider };
  </code></pre>
  
  <p>And I'm able to access <code>name</code> in the child component using</p>
  
  <pre><code>import { GameContext } from '../../context/GameContext';    
  const [name, setName] = useContext(GameContext);
  console.log(name);
  </code></pre>
  
  <p>But now I want to get the other state values into the same child component, like <code>[color, setColor]</code> and <code>[startgame, setStartgame]</code>, from the GameContext.js. <br>How do I get those values into a child component? <br></p>
  
  <p>I have another question, Somehow I feel this is a really stupid question, but why can't I do something like this in the GameContext.js?...</p>
  
  <pre><code>&lt;GameContext.Provider value={[name, setName,color, setColor, startgame, setStartgame]}&gt;
  </code></pre>
  
  <p>and get the values in the child component like this...</p>
  
  <pre><code>const [name, setName,color, setColor, startgame, setStartgame] = useContext(GameContext);
  </code></pre>
  
  <p>I tried this, but the browser is complaining that I'm breaking rules of react hooks.</p>