Looking for critique on my Drum Machine project

Code Feedback
1

https://codepen.io/Elemeandor/full/vYxLrEL

I tried to make it responsive without media queries.

2

Amazing job! It works really well and is perfectly responsive.

Some suggestions:

  • Change onClick to onMouseDown for better musical performance.
  • Adding/removing the active class 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.
1 Like
3

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 onClick vs. onMouseDown rabbit hole right now.

4

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.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.