title: Passing React props and accessing as ObjectName.ObjectName
body: <p>I am importing an Array of objects like so <code>import productData from './productData.js'</code>. </p>
  
  <p>Where <code>productData.js</code> looks something like:</p>
  
  <pre><code>var productData = [{}, {}, ...]
  module.exports = {productData}
  </code></pre>
  
  <p>However, now within the component expression <code>TableComponent</code> to map over the array I have to access it as <code>productData.productData</code>. Why is this?</p>
  
  <pre><code>const MainBody = () =&gt; {
    return (
      &lt;TableComponent productData={productData.values}&gt; &lt;/TableComponent&gt;
    );
  }
  
  const TableComponent = props =&gt; {
    const {productData} = props
    const rows = productData.productData &amp;&amp; productData.productData.map((row, index) =&gt; {
      return (
        &lt;tr&gt;
          &lt;row&gt;hello&lt;/row&gt;
        &lt;/tr&gt;
      );
    });
    return &lt;tbody&gt;{rows}&lt;/tbody&gt;
  }
  </code></pre>