Build a Drum Machine - feedback please

Build a Drum Machine - feedback please


Hey there,

my (unstyled) Drum Machine is here :
I would really appreciate some constructive criticism :slight_smile:
If you have any advice/suggestions on how to improve my code I’d love to hear it.



Link to the challenge:


I like it so far. And it will be great once it is styled.

However, I do think there will be an issue with User Story #4, calling the audio and src with className clip.


Hey there tolkadot,

I didnt really look through the code. I did jam out for a a couple minutes and enjoyed the sounds tho. Looking forward to seeing the final product.

Happy coding!


Check out this bit of advice. I think it will help:


Avoid using document.getElementById(keyPressed).play();, use refs instead. That’s advice i got. How to set up refs:
Put in audio tag ref={this.Q}, then in constructor this.Q = React.createRef();, then in componentDidMount() put this.somevar = ReactDOM.findDOMNode(this.Q.current) then in componentWillUnmount() put this.somevar = ReactDOM.findDOMNode(this.Q.current). So when you call function watchKeyboard and compare if and if it is, then;. Of course since there a many sounds, you better put it inside a object or an array and use switch/case instead of bunch of if’s …


Thanks for that - I hadn’t run it through the test yet :slight_smile:


I am about where you are right now. I’m hoping this will save us both a lot of pain :wink:


Thanks @codename11 - this is what I was looking for. Did you get a reason to avoid using
document.getElementById(keyPressed).play(); ??


I was told that is react way of using refs. And in documentation of react says it’s too avoid them, except in some specific circumstances:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.).
    I also googled “document get element by id vs refs in react” to get bigger picture of “why not”.


I like the sounds :slight_smile: we’re waiting for the styles, here’s my react drum app: and my pure vanilla js version: if you ever want to explore more i suggest you also enroll this pure vanilla course from Wes Boss himself: AND IT’S TOTALLY FREE!