Issue with mapping Object of Arrays

Question

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.

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:

This is how the data from the API is after calling the GET request:

"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
  },

My code block I'm currently setting up before setState:

//mapping odin and cmf results then adding the totals together    
let odinTotal = response.data.fileResults.incFiles.map(item => item.odinResult.total)
let cmfTotal = response.data.fileResults.incFiles.map(item => item.cmfResult.total)
const legendData = {
   labels: response.data.fileResults.incFiles.map(item => item.name),
   totals: odinTotal.map(function (num, idx) {
       return num + cmfTotal[idx]
   })
}

My result is this from the above:

After deconstructing my state I tried to map it out in under render but get an error of: "Cannot read property 'map' of undefined."

<ul>
  {legendData.labels.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

Answer 1

It sounds like you are fetching some data when the component mounts, so you need to likely provide some initial empty array value to legendData 's labels array.

state = {
  legendData: {
    labels: [],
    totals: [],
  },
}

Then as long as your data loading logic also returns and updates state with an array your render logic will work.

Another option is to use a guard pattern on the mapping function to ensure the labels property exists and has a length property.

<ul>
  {legendData && legendData.labels.length && legendData.labels.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

Answer 2

A react component in which you use map should always have a Intial state to empty array or empty object based on requirement.

check for the condition:

{legendData && legendData.labels.length ?
 legendData.labels.map(item =>(
<li key={item}>{item}</li>
)) : null}