React: map() inside map()

Question

I have an object that has an array of objects inside it, and this array has another array of objects inside it. I'm using map to render html and when I use map inside another map shows an error, so using console.log, sometimes it shows the value and other times it shows undefined. Something it's happening in the render.

{
    "id": "foo"
    "adSets": [
        {
            "id": "adset1",
            "name": "adset1",
            "ads": [
                {
                    "id": "ad1",
                    "name": "ad1",
                }
            ]
        },
        {
            "id": "adset2",
            "name": "adset1",
            "ads": [
                {
                    "id": "ad2",
                    "name": "ad2",
                },
                {
                    "id": "ad3",
                    "name": "ad3",
                }
            ]
        }
    ]
}

{campaignData.adSets.map((adSet) => {
               console.log(adSet.ad)
               return (
                 <li key={adSet.id}>
                   <span className="">{adSet.name}</span>
                   <ul>
                   {adSet.ads.map((ad) => {
                     return (
                       <li key={ad.id}>
                        <span className="">{ad.name}</span>
                       </li>
                     );
                   })}
                  </ul>
                 </li>
               );
})}

picture of results

can you add the dummy format of the array of object it will be help to fix. — Mahadev Mirasdar
– Mahadev Mirasdar, Commented Jun 10, 2023 at 16:23
Does this answer your question? How to map inside a map function in reactjs — Komeil Mehranfar
– Komeil Mehranfar, Commented Jun 10, 2023 at 16:43
Welcome to Stackoverflow! Please edit your question to remove the image, do not post text in images, post the text itself. Also, "what's up?" is not a clear question. It looks like your screenshot is showing the results of console.log(), which you don't show in your question. Check out how to ask as well. A minimal reproducible example would help here. Your question may be closed unless you add clarifying details. — Andy Ray
– Andy Ray, Commented Jun 10, 2023 at 17:13
What do you mean by "other times it returns undefined."? map() always returns an array, never undefined. — Bergi
– Bergi, Commented Jun 10, 2023 at 17:13

Mahadev Mirasdar · Accepted Answer · 2023-06-10 17:06:34Z

-1

let obj = {
  "id": "foo",
  "adSets": [{
      "id": "adset1",
      "ads": [{
        "id": "ad1"
      }]
    },
    {
      "id": "adset2",
      "ads": [{
          "id": "ad2"
        },
        {
          "id": "ad3"
        }
      ]
    }
  ]
}

//console.log(obj)

for (let x in obj) {
  if (Array.isArray(obj[x])) {
    obj[x].map((e) => {
      for (let j in e) {
        if (Array.isArray(e[j])) {
          e[j].map((k) => {
            console.log(k.id);
          })
        } else {
          console.log(e[j]);
        }
      }
    });
  }
}

answered Jun 10, 2023 at 17:06

Mahadev Mirasdar

4745 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: map() inside map()

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related