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

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"
                />
   )) 
)}

CodePudding user response：

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"
    />
)

CodePudding user response：

Your idea seems correct but you need to check syntaxes a bit.

 {loading && error ? (
  <div> Loading Bro </div>
) : (
  boards.map((board, index) => (
         <img
           key={index} //the key need to be unique that will make sure component get re-rendered correctly
           className={style.todo_profile_picture_top}
           style={{
             right: `${100 - index * 20}px`, //you need change this to like this for proper right position calculation
             zIndex: 10 - index, //you don't need to have brackets here
           }}
           src={pp1}
           alt="profile"
           />
   )) 
)}