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

[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]
}

[Jason Melton]

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