title: Can't access values when mapping over in next.js / react
body: <p>Hi I have some json which I'm having trouble accessing specific values in. Here is the code which is erroring:</p>
  
  <pre><code> const Index = props =&gt; (
   &lt;Layout&gt;
   &lt;h1&gt;Case Studies&lt;/h1&gt;
  
   &lt;ul&gt;
     {props.caseStudies.map(({ caseStudy }) =&gt; (
       &lt;a&gt;{caseStudy.title}&lt;/a&gt;
     ))}
   &lt;/ul&gt;
  
  &lt;/Layout&gt;
  );
  </code></pre>
  
  <p>The error I'm getting is </p>
  
  <pre><code>Cannot read property 'title' of undefined
  </code></pre>
  
  <p>However if I remove:</p>
  
  <pre><code>{caseStudy.title} 
  </code></pre>
  
  <p>for the above codeblock I can see in the React Inspector tools in Chrome that "caseStudies" is a prop of Index. And "title" is a key within the caseStudies prop. I just can't seem to access it!</p>
  
  <p>Here is the offending json:</p>
  
  <pre><code>{
  "status": "ok",
  "sets": {
      "caseStudies": [
          {
          "_id": "1",
          "title": "Case Study Item One",
          "_title": "Case Study Item One",
          "date": "2018-06-01"
          }
      ]
   }
  }
  </code></pre>
  
  <p>Thanks.</p>