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.
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.