'How to map an array with different zIndex each element in react.js

I wanna map an array with different zIndex with each element. how can i do it? should i write within tenary? or any other option? Please help. Here is my code :

 {loading && error ? (
  <div> Loading Bro </div>
) : (
  boards.map((board, index) => (
         <img
                  className={style.todo_profile_picture_top}
                  style={{
                    right: `100px - ${index} * 20`,
                    zIndex: {10 - index},
                  }}
                  src={pp1}
                  alt="profile"
                />
   )) 
)}
reactjsz-indexmap-function


Solution 1:[1]

Try something like this

boards.map((board, index) => (
    <img
       key={index}
       className={style.todo_profile_picture_top}
       style={{
           right: `100px - ${index} * 20`,
           zIndex: {10 - index},
       }}
       src={pp1}
       alt="profile"
    />
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abdulrahim Klis

Related Questions