Drum machine question

JavaScript
1

I was able to come up with working solution, but I think I used too much vanilla DOM, while my goal was to build react app.

challenge

repository with my solution blurred because it is a spoiler

Deployed here

Specifically, handlePressKey function in App.js.

When I look at it, I have a suspicion that I used all this vanilla JS just because I don’t know something about react.

Maybe same effect - creating hotkeys - can be achieved with some react hooks which are not familiar to me yet?

My first thought was to just attach accessKey attribute to buttons - but then I learned that it is bad way to go due to accessibility.

Right now I am reading docs about useRef but did not figured out if it will be useful in this situation. I think - maybe it will - because in docs there is a statement, that

Changing a ref does not trigger a re-render. This means refs are perfect for storing information that doesn’t affect the visual output of your component.

link to the docs

2 
document.getElementById(triggeredDrumPad[0].text).play();

This is the only part that bothers me.

1 Like
3

Yes, it is the line that bothers me more than any other line. Any suggested change and/or research?

4

Use a ref instead.

1 Like
5

Ok, I’ll try. Thank you for the help.

6

I was able to apply useRef.
But
I achieved that by moving part of functionality from App.js to DrumPad.js.

It’s all good, but my previous version of code has only one eventListener attached, and this version has 9 of them, since 9 instances of DrumPad rendered.

I was trying to apply useRef and to have only one eventListener at the same time. My approach was:

  • create multiple refs in App.js
  • pass refs from App to DrumPad, using forwardRef API, one for each
  • to have only one event listener in App.js and also to have event handler in App.js; pass this event handler as a prop into DrumPad

That did not work out.
I found info how to pass multiple refs to one child.
I found info how to pass ref down through multiple levels of component tree.
I did not found info how to pass multiple refs from parent to children collection properly, and my own attempts didn’t work, here is the branch with one of the attempts.