DEV Community

Discussion on: Part 2: Build This Cool Dropdown Menu with React, React Router and CSS

Collapse
link2twenty profile image
Andrew Bone

Very nice! That's some production ready code. Having an ID to use as the key is a nice touch and will speed up potential re-renders 😊

Do you know about the Modulus (Remainder) operator? Using it you can get rid of colorCounter.


As the name suggests it give you the remainder of the division. For instance:

0 % 3 = 0
3 goes in 0 0 times neatly with a remainder of 0

1 % 3 = 1
3 goes in 1 0 times neatly with a remainder of 1

2 % 3 = 2
3 goes in 2 0 times neatly with a remainder of 2

3 % 3 = 0
3 goes in 3 1 time neatly with a remainder of 0

4 % 3 = 1
3 goes in 4 1 time neatly with a remainder of 1

and so on.


This means we could get the colour by doing some thing like this 😁

// dynamic styles for each menu item 
const itemStyle = {
  "top": `${index * 1.8}em`,
  "backgroundColor": colorArr[index % colorArr.length]
}
Collapse
cooljasonmelton profile image
Jason Melton Author • Edited on

Great tip! I've used the Modulus operator before but not in this way. That's a super useful trick!