How to run map function in Reactjs?

Question

How to run map function I am trying to map function but it throws error cannot read the property of map undefined in Reactjs

I'm trying to do something like the following in React JSX component

const data = {
    Details: [
{       
        "id": "6f12",
        "nextPart": {
          "id": "1ae2",
          "text": "Details",
          "heading": "twice data and staff memeber",
          "checks": [
            {
              "value": "A"
            },
            {
              "value": "B"
            }
          ],
          "Types": "Error"
        },
        "conclusion": "final"
    }
    ]
  }

You're trying to use map on an object which , you can only call map on an array. See https://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays for solutions howchange your map to an array — Moshe Sommers, May 13 '20 at 19:26

score 0 · Accepted Answer · answered May 13 '20 at 19:29

The nextPart property is an object, not an array. Map works on arrays. If your Details is intended to be an array of objects (which looks like it does), you can do it like this

{data.Details.map((item) => {
    const { text, heading, checks } = item.nextPart;
    return (
      <div>
        <div>{text}</div>
        <div>{heading}</div>
        <div>
          {checks.map(({ value }) => (
            <div>{value}</div>
          ))}
        </div>
      </div>
    );
  })}

How to run map function in Reactjs?

1 Answers1