如何在反应中将 class 分配给 map 中的每个第 n 个 div 元素？

Question

How can I assign a class to every nth div element in map, in react? Here is my code:

const users = [{name: 'Max'}, 
               {name: 'Pete'}, 
               {name: 'Ben'}, 
               {name: 'Bruce'}];

return ({users.map(({name})=>{
  return (
    <div className="users">{name}</div>
);
)})

How can I assign a different class to every 2nd div element?

Answer 1

You can use index inside map callback function to get current index.

return ({users.map(({name},index)=>{
  if(index%2==1){
   return (
    <div className="users">{name}</div>
); 
  }
   return (
    <div>{name}</div>
);
});});

Answer 2

While it is possible to do this via the second parameter in the map callback, as per @TusharShahi's answer, you may not need to do this at all. Using the :nth-child() CSS selector, you can just apply the same class to all elements and use CSS to mark every n th element:

Make every 5th element red:

.users:nth-child(5n){
    color:red;
}

Make every even element blue:

.users:nth-child(even){
    color:blue;
}

See runnable code below:

 .users:nth-child(5n) { color: red; }

 <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div> <div class="users">user</div>

Answer 3

Depending on your needs, you might also achieve this only with CSS, using the:nth-child pseudo-class:

 div {color:blue;} div:nth-child(even){color:red;}

 <div>Max</div> <div>Pete</div> <div>Ben</div> <div>Bruce</div>

if your HTML is becoming more complex, and you need to style children nodes under this div, this is probably NOT the best option, and giving a class makes sense, but I thought it was worth mentioning.