I tried to make it responsive without media queries.
Amazing job! It works really well and is perfectly responsive.
onMouseDownfor better musical performance.
- Adding/removing the
activeclass directly in the DOM element is a bit of a React anti-pattern and I have run into issues where this breaks. Although it’s working fine here… so just a heads up.
Thank you for the reply! One question though. I didn’t know that adding and removing classes in the DOM directly was an anti-pattern. How can I possibly expect that action to break my code in future projects?
It wasn’t a big deal here, but I just wanted to have
keydown simulate a button press and this was the only other way I knew how.
Also, thank you for mentioning
onMouseDown. I’m actually looking at the
onMouseDown rabbit hole right now.
I can’t find the reference that specifically mentions this, but I’ve run into issues where it simply doesn’t add the class in question.
The ‘right’ way to do it is to have a state variable that holds your classes, then use the setter add/remove classes from that variable, be it a string or an array that you concatenate in the jsx.
You’re probably fine with this, but keep it in mind if in the future you try the same thing and it doesn’t work.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.