How increment id tag with map function in React

Question

I have array in react like

[
{
  no:"s1",
  name:"abcd"
},
{
  no:"s1",
  name:"abcd"
}
]

I want to use map function to render in UI but. I want id to be increment with map integrations

eg

<ul>
   <li id="1">
     {no}
     {name}
   </li>
  <li id="2">
     {no}
     {name}
  </li>
</ul>

this is not how you create an array.. also, array in js, not in react, its just a library — Omri Attiya, May 12 '22 at 07:46
Use `index + 1` in id? index is the second parameter in the `map` callback function — adiga, May 12 '22 at 07:46

R4ncid · Accepted Answer · 2022-05-12T09:26:26.343

0

you can just use array index for that

const data = [
{
  no:"s1",
  name:"abcd"
},
{
  no:"s1",
  name:"abcd"
}
]
...
return <ul>
  {data.map((item, i) => <li key={i} id={i+1}>{item.no} {item.name}</li>)}
</ul>

edited May 12 '22 at 09:26

answered May 12 '22 at 07:47

R4ncid

6,944
1
4
18

1

The data is invalid? – evolutionxbox May 12 '22 at 07:47
1

@evolutionxbox yes I've copied the data from the question and I didn't notice it – R4ncid May 12 '22 at 07:53

How increment id tag with map function in React

1 Answers1

Linked