title: Passing multiple value and setter pairs to Context.Provider in React
body: <p>All the documentation and blog posts I've managed to find so far only deals with a single [value, setValue] pair scenario. In my case I would like/need to pass multiple pairs of [value, setValue] variables to a Provider using the useContext hook.</p>
  
  <p>Here is the typical example I setup in CodePen:
  <a href="https://codepen.io/nardove/pen/XWrZRoE?editors=0011" rel="noreferrer">https://codepen.io/nardove/pen/XWrZRoE?editors=0011</a></p>
  
  <pre><code>const App = () =&gt; {
      return(
          &lt;div&gt;
              &lt;MyProvider&gt;
                  &lt;ComponentA /&gt;
              &lt;/MyProvider&gt;
          &lt;/div&gt;
      );
  }
  
  const MyContext = React.createContext();
  const MyProvider = (props) =&gt; {
      const [value, setValue] = React.useState("foo");
      return(
          &lt;MyContext.Provider value={[value, setValue]}&gt;
              {props.children}
          &lt;/MyContext.Provider&gt;
      );
  }
  
  const ComponentA = () =&gt; {
  const [value, setValue] = React.useContext(MyContext);
      return(
          &lt;div&gt;
              &lt;h1&gt;
                  The value is: {value}
              &lt;/h1&gt;
          &lt;/div&gt;
      );
  }
  
  ReactDOM.render(&lt;App /&gt; , document.getElementById('app'));
  </code></pre>
  
  <p>If you can share any ideas on how pass multiple [value, setValue] pairs to the Provider or an alternative to my problem will be much appreciated</p>