title: How to pass multiple arguments through React Context (from Consumer to Provider)?
body: <p>I am creating a simple app using create-react-app</p>
  
  <p>And was exploring using <code>React Context API</code> to pass few stuff from one component to another component.</p>
  
  <p><strong>Spice.js</strong></p>
  
  <pre><code>const spiceList = [
    {
      id: 1,
      title: 'Spice 11',
      name: require('./images/spice1.jpeg')
    },
    {
      id: 2,
      title: 'Spice 22',
      name: require('./images/spice2.jpeg')
    }
  </code></pre>
  
  <p>];</p>
  
  <pre><code>return (
    &lt;div&gt;
      &lt;h1&gt;Welcome to Spices&lt;/h1&gt;
  
   &lt;SpiceContext.Provider value={'Masala'} imgSrc={img3}&gt;
      &lt;SpiceList/&gt;
   &lt;/SpiceContext.Provider&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>}
  }</p>
  
  <p>export default Spice;</p>
  
  <p><strong>Consumer in SpiceList</strong> Where I plan to retrieve multiple attributes instead of a single value attribute. </p>
  
  <blockquote>
    <p>How this could be achieved? Thanks</p>
  </blockquote>
  
  <pre><code>&lt;&gt;
                      &lt;h1&gt;{props.title}&lt;/h1&gt;
                      &lt;SpiceContext.Consumer&gt;
                        {spiceContext=&gt; &lt;img src={spiceContext.value} alt={spiceContext.title}/&gt;
                        }
                      &lt;/SpiceContext.Consumer&gt;
        &lt;/&gt;
  </code></pre>
  
  <p><strong>SpiceContext</strong></p>
  
  <pre><code>import React from 'react';
  </code></pre>
  
  <p>const SpiceContext = React.createContext(null);</p>
  
  <p>export default SpiceContext;</p>