Binding keys to buttons in ReactJS (for drum project)

I’ve been doing the drum pad project for front end certifications and I’m pretty close to finished with it, but I’m having trouble setting up a system to bind keys to specific sounds / buttons. I tried using onKeyPress along with a function which gives different outputs based on which key is pressed, but I haven’t gotten any keys to work and I don’t know where I’m making my mistake.

Any help is appreciated, most of my code is just copy pasted formats for different buttons / sounds, whats actually important is between lines 79 and 97 or so.

Codepen: https://codepen.io/AugustTGuenther/pen/vYLRrgW

Hey there,

currently your onKeyPress-functions are bound to the buttons.

If you add a console.log("pressed") to the handleKeyPress-function,
you first have to click a button (to focus it), then you can press q and you’d see the console.log.

But you don’t want to interact with a button first to trigger the handleKeyPress-function.

That’s why you have to re-think your solution.

1 Like

Ahh thank you. I had seen a few ways to do it but this was with inputs rather than buttons so i should’ve known. Thank you for the reply, just finished it up :smile:

1 Like

Great job, it’s working!

1 Like