Build a Drum Machine help

Build a Drum Machine help
0

#1

Hi All,
I have completed the Drum Machine challenge.
One thing is bothering me and that is with my design.
I used react to build the app.I have a click listener to listen for click events which plays the audio file for me.
The audio files are embedded within an audio tag and are triggered using vanilla javascript querySelector on click.
Is it a good practice to use vanilla JS DOM selectors with React since react itself works with a virtual DOM?
Here is my codepen:https://codepen.io/MidhunLC/pen/WyVBNV


#2

Yeah, this is how I did it too (in fact, I just used getElementById). I had the same misgivings but it works. You might be able to find some kind of React library that would save you the effort, but that would make it hard to implement in Codepen. When you do the volume slider, you’re going to have to use some kind of access to the DOM (unless you go the DnD React implementation route, which, again, is not sure to work in Codepen).


#3

thanks for the reply Dan.
I was hoping to find out a better way of doing this using just React.