How to render items using alternating colors based on the items.id in nextjs

Asked Dec 08 '22 at 19:38

Active Dec 08 '22 at 19:38

Viewed 24 times

When rendering a list of data, I need to return it with 2 different colors, for example: the first item background color should be white, and the second items should be gray. This is what I tried

`        
<div className={`cursor-pointer w-full my-1 ${event.id % 2 === 0 ? 'bg-white' : 'bg-gray50'}` } >
`

It only works if the item id is odd, otherwise it does not work. I would appreciate any suggestions you may have

asked Dec 08 '22 at 19:38

Divad

2

simply use `odd:bg-gray-50 even:bg-white` which is inbuilt in tailwindcss :) – MJN Dec 08 '22 at 19:42
it gives the same color, all gray – Divad Dec 08 '22 at 19:48
Check https://stackoverflow.com/a/3084304/535480 – James Dec 08 '22 at 19:48
– Divad Dec 08 '22 at 19:49
1

@Divad You can check the demo in tailwindplay https://play.tailwindcss.com/xEWMlzDL1v – MJN Dec 08 '22 at 20:14

How to render items using alternating colors based on the items.id in nextjs

0 Answers0