Insert counter in a reactjs map

Question

I'm starting to ReactJs and have a doubt when generating a list with an ordering. How do I include a counter inside my map?

The way I'm doing it is repeating the number 1 in all records. I wanted each record to have a counter (1 Adam, 2 Andrew, 3 Sophia ...)

<div>
  {
    data.contacts.data.map((contact) => {
      return (
        <div>
          <span>1</span>  <b>{contact.data.name} {contact.data.email}</b>
        </div>
      )
    })
  }
</div>

stackoverflow.com/questions/38364400/index-inside-map-function — Krusty the Clown
– Krusty the Clown, Commented May 12, 2022 at 14:38

r.delic · Accepted Answer · 2022-05-12 14:41:36Z

2

Use the second argument (array index) of the map method:

<div>
  {
    data.contacts.data.map((contact, index) => (
        <div>
          <span>{index + 1}</span>  <b>{contact.data.name} {contact.data.email}</b>
        </div>
      ))
  }
</div>

answered May 12, 2022 at 14:41

r.delic

8618 silver badges20 bronze badges

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

Comments

rubenf01 · Accepted Answer · 2022-05-12 14:50:42Z

1

With map you have access to the index. So you can use the index to add a counter. Also, remember to add a key-value to each child you're printing with map (you can use the index for this).

<div>
  {
    data.contacts.data.map((contact, index) => {
      return (
        <div key={index}>
          <span>{index + 1}</span>  <b>{contact.data.name} {contact.data.email}</b>
        </div>
      )
    })
  }
</div>

answered May 12, 2022 at 14:50

rubenf01

1341 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Insert counter in a reactjs map

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related