Drum Machine (React) mapping keys

1

Hey FCC followers,

I’ve been working on the Drum Machine project and hit a wall with mapping the keys to the drum pads.
Codepen link to project here.
The correct sound is being played when I strike the key on the keyboard but these are not:

  1. Visual feedback that the drum pad is being pressed
  2. The display is not displaying the correct instrument text.

I think my problem is that the event.target is always focused on what the MOUSE event has targeted, not what the KEYDOWN event has targeted. A little bit of help in the right direction would be greatly appreciated!

2

Correct. You might need to get the keyboard events

3

I installed react-keyboard-event-handler but I’m still running into the same problem. I’m using the keyboard events but the main issue ( at least within the way I’m looking at things) is that the keyboard events do not generate an event.target whereas the mouse events do generate an event.target. Is there a way to somehow generate a target when using key events?

4

Unneccesary. In componentDidMount just add

componentDidMount() {
		//Set event listeners for keypress
		window.addEventListener("keyup", this.keyPress);
		
	}

where keyPress is a function which catches and filter pressed keys.

keyPress(event){
		
		let myKey = event.key;//Get pressed key.

		//rest of code

		
}

Don’t forget to declare it in your constructor!

Edit1:

componentWillUnmount() {

		window.removeEventListener("keyup", this.keyPress); //Don't forget to unmount listener.
//And unmount those refs you are using.
	}
5

Gonna hit this right now! Thanks for the input. Will let you know how it goes