Drum machine question

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.


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

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

Use a ref instead.

1 Like

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

I was able to apply useRef.
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.

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