How do I map an array of objects with react

Question

This is the Array I'm trying to map

const arr = [
{"title" : "something",
 "Text" : "something"
},
{"title" : "something",
 "Text" : "something"
},
{"title" : "something",
 "Text" : "something"
}

]

Tried to map it like this

{arr.map((item, index) => {
    return (
      <div key={index}>
         <p>{item.title}</p>
         <p>{item.Text}</p> 
         <button>
           click here 
         </button>
      </div>
    )
})}

It won't work so what am i missing here?

edited*

item.text should be item.Text and Const should be const — andy mccullough
– andy mccullough, Commented Apr 1, 2022 at 9:58

mgm793 · Accepted Answer · 2022-04-01 10:16:01Z

3

Const needs to be lowercase

const arr = [
 { 
   "title" : "something",
   "Text" : "something"
 },
 {
   "title" : "something",
   "Text" : "something"
 },
 {
   "title" : "something",
   "Text" : "something"
 }
];

The Title key in you object is catitalized

{arr.map((item, index) => {
    return (
      <div key={index}>
         <p>{item.title}</p>
         <p>{item.Text}</p> 
         <button>
           click here 
         </button>
      </div>
    )
})}

Or you also can do it like this

{arr.map(({title, Text}, index) => {
    return (
      <div key={index}>
         <p>{title}</p>
         <p>{Text}</p> 
         <button>
           click here 
         </button>
      </div>
    )
})}

edited Apr 1, 2022 at 10:16

answered Apr 1, 2022 at 10:03

mgm793

2,08618 silver badges26 bronze badges

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

Comments

wildgamer · Accepted Answer · 2022-04-07 01:10:06Z

3

Why your Const is capital, it should be const and item.text should be item.Text

const arr = [
{
 "title" : "something",
 "Text" : "something"
},
{"title" : "something",
 "Text" : "something"
},
{"title" : "something",
 "Text" : "something"
}
]

{arr.map((item, index) => {
    return (
      <div key={index}>
         <p>{item.title}</p>
         <p>{item.Text}</p> 
         <button>
           click here 
         </button>
      </div>
    )
})}

edited Apr 7, 2022 at 1:10

answered Apr 1, 2022 at 10:00

wildgamer

3571 silver badge3 bronze badges

2 Comments

jsN00b Over a year ago

Not sure if this might add value to the above code-snippet.

Estif Over a year ago

Sry wrote it wrong... So this should work right with the corrections

Collectives™ on Stack Overflow

How do I map an array of objects with react

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related