How to map an array of object [duplicate]

Question

I have an object like this:

const arr = {
  "items": [{
    "id": "61f5530ffa13c013c514cc5f",
    "name": "Classic",
    "slug": "classics",
    "unit": "1 each",
    "stock": 200,
    "price": 500,
    "quantity": 3,
    "itemTotal": 1500
  }],
  "isEmpty": false,
  "totalItems": 3,
  "totalUniqueItems": 1,
  "total": 1500,
  "meta": null
};

How can I map the above to an h1 element?

I tried this, I know it's wrong

  const myarr = arr.map((item) => {
     return <h1 key={item.id}>{item.name}</h1>
 });

Map it to what h1 element? What are you expecting to render? It seems like the only problem is you're trying to .map across an object, not the array that's one of its values. — jonrsharpe
– jonrsharpe, Commented Feb 16, 2022 at 14:41
What is your expected Output because First key value pair is Array — Ajay Raja
– Ajay Raja, Commented Feb 16, 2022 at 14:42
Yes, your array isn't an array. You probably want to map arr.items. Might be good to not name an object arr in the first place. Give it a descriptive name. — isherwood
– isherwood, Commented Feb 16, 2022 at 14:42

Sudip Thapa · Accepted Answer · 2022-02-16 14:44:03Z

1

Your arr is object and arr.Items is array. so you can iterate as

const myarr = arr.items.map((item) => {
 return <h1 key={item.id}>{item.name}</h1>});

answered Feb 16, 2022 at 14:44

Sudip Thapa

2031 gold badge3 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

How to map an array of object [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related