Drum Machine React: Click effect needed on keys

Hello world!

Help needed
So I’m build a drum machine as you can see from my code below I’m almost done however I’m trying to add an effet (pushed down ) on my keys, on my react code with either the mouse or with keyboard, but nothing happens except for the sound that comes out, it would seem that I’m missing something. If you could take a look and let me know what I’m missing it will be much appreciated.
Thanks.

Your code so far

https://codepen.io/djfive/pen/gOmwrKr?editors=0010

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

You already have a rule in your CSS which styles the button when clicked; it isn’t working now because is commented out, but if you remove the /* */ you will see that the style of the buttons changes when clicked. However, if you want the same effect when you press the correspondent keyboard key, you’ll need to programmatically add and then remove a CSS class using the {element}.classList.toggle(’{class-name}’) method. Probably there are other ways to do that…this is the approach I used in styling my drum-machine app. Have a look at lines 28-29.

@Marco16168 Your suggestion to use classList.toggle is not really the “React” way of doing things. When all possible, you should not manipulate the DOM directly, which is what you are suggesting.

A few more traditional React approaches could be found in this article.

Below is another thread on this forum on the topic.

You’re right @camperextraordinaire, the methods you suggest are certainly more correct. Thanks for pointing that out.

Thank you for the quick responses as soon as i’m able to work on the projet i’ll let you know the result.

Hello guys!!
I know this is little late but i want to thank you again for your responses it was realy helpful im almost done but I haven’t quiet figured out everything yet, but neverthe less i’m making small progresse.

P.S. Don’t hesitate to checkout my work and let me know what you think overall!!!

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