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] }
Great tip! I've used the Modulus operator before but not in this way. That's a super useful trick!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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 😁
Great tip! I've used the Modulus operator before but not in this way. That's a super useful trick!