title: Issue with mapping Object of Arrays
body: <p>I am trying to set up a block of code to prepare to setState, however, I'm running into an issue mapping a list in the render section as reactjs is telling me map is not a function. I don't think I'm setting this up correctly initially and it should be an array of objects instead of object arrays.</p>
  
  <p>My goal is to set up a list. The names on the left side. The sum total of ondinResult and cmfResult on the right side. Below is the result I should expect:</p>
  
  <p><a href="https://i.stack.imgur.com/G4svu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4svu.png" alt="enter image description here"></a></p>
  
  <p>This is how the data from the API is after calling the GET request:</p>
  
  <pre><code>"fileResults": {
      "incFiles": [
        {
          "assetManagerId": 5,
          "name": "BlackRock",
          "odinResult": {
            "total": 5,
            "success": 2,
            "error": 3
          },
          "cmfResult": {
            "total": 0,
            "success": 0,
            "error": 0
          }
        },
        {
          "assetManagerId": 8,
          "name": "Barings",
          "odinResult": {
            "total": 0,
            "success": 0,
            "error": 0
          },
          "cmfResult": {
            "total": 10,
            "success": 8,
            "error": 2
          }
        },
        {
          "assetManagerId": 11,
          "name": "AIM Derivatives",
          "odinResult": {
            "total": 6,
            "success": 4,
            "error": 2
          },
          "cmfResult": {
            "total": 0,
            "success": 0,
            "error": 0
          }
        },
        {
          "assetManagerId": 11,
          "name": "AIM Derivatives",
          "odinResult": {
            "total": 0,
            "success": 0,
            "error": 0
          },
          "cmfResult": {
            "total": 8,
            "success": 2,
            "error": 6
          }
        }
      ],
      "odinTotal": 11,
      "cmfTotal": 18
    },
  </code></pre>
  
  <p>My code block I'm currently setting up before setState:</p>
  
  <pre><code>//mapping odin and cmf results then adding the totals together    
  let odinTotal = response.data.fileResults.incFiles.map(item =&gt; item.odinResult.total)
  let cmfTotal = response.data.fileResults.incFiles.map(item =&gt; item.cmfResult.total)
  const legendData = {
     labels: response.data.fileResults.incFiles.map(item =&gt; item.name),
     totals: odinTotal.map(function (num, idx) {
         return num + cmfTotal[idx]
     })
  }
  </code></pre>
  
  <p>My result is this from the above:
  <a href="https://i.stack.imgur.com/QeY5I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QeY5I.png" alt="enter image description here"></a></p>
  
  <p>After deconstructing my state I tried to map it out in under render but get an error of: "Cannot read property 'map' of undefined."</p>
  
  <pre><code>&lt;ul&gt;
    {legendData.labels.map(item =&gt; (
      &lt;li key={item}&gt;{item}&lt;/li&gt;
    ))}
  &lt;/ul&gt;
  </code></pre>