Drum Machine onClick and key events not working

[malarix]

Hi, I’m working on the Drum Machine front end project and I’m having trouble getting events to work properly. Any time I press a key corresponding to a drum pad element or click on one of the drum pads, nothing happens and the state doesn’t seem to be updated. I’m using functional components instead of class components so I’m trying to use the useEffect() hook for my key listener instead of component lifecycle methods.

I also seem to be having a problem with onClick events for some reason despite the fact I’ve been able to use them almost the same way before (in the Random Quote project).

Here’s an example of what I’m trying to do currently for the onClick event handler function

const handleClick = () => { dispatch(() => ({ type: 'DRUM_ACTIVATED', payload: drum.id })); playSound(drum.id); console.log('Played sound: ' + drum.id); }

which is then used in the onClick prop by the drum pad element

<div className="drum-pad" id={drum.id} onClick={handleClick}

here is the handler function I’m using for my key listener

const handleKeydown = event => { if(event.key === drum.key) { dispatch(() => ({ type: 'DRUM_ACTIVATED', payload: drum.id })); playSound(drum.id); console.log('Played sound: ' + drum.id); } }

as well as the hook I’m using for events

useEffect(() => { window.addEventListener('keydown', handleKeydown); return () => window.removeEventListener('keydown', handleKeydown); }, []);

and finally here is my codepen, I know it looks like vomit right now but I’m just trying to get something to work

Drum Machine

I’m sure I’ve messed up something with the hooks for key events but I have no idea what I’m doing wrong with the onClick events since the only difference between how I’ve implemented it here and how I used it in the random quote project is that I have it inside of a wrapper function so that it also calls the playSound() function

[lasjorg]

1. I see a Redux error in the console, this is what the error links to (just return the object and do not wrap it in a function).

Redux - A predictable state container for JavaScript apps. | Redux

2. The id you are using for document.getElementById(id) is not the audio element, but the parent div and it does not have the .play() method on it. Use firstElementChild to get to the audio element (or maybe use a React ref).

3. You should also log out the event.key and drum.key inside handleKeydown before your if statement (compare the case of the letters).

4. I think you want state.lastActivated in your useSelector.

[malarix]

First of all thanks for all the help! I think I got a little confused while trying to mess with useDispatch and useEffect at the same time and got it in my head that they both take callback functions

Anyway, I think I’ve fixed all the issues you brought up and now my #display element is correctly updating from state changes when I click the drum pads but I’m still having the issues where sounds aren’t playing and keydown events still aren’t being recognized.

I’m still very ignorant about using hooks despite doing a bit of reading about them since the course mostly covers class components, so I’m not really sure how to fix the problem with the key events. Any advice is very much appreciated!

EDIT: My bad I missed the part about the case on your third point and now the key press events are working! Just had to change event.key to event.key.toUpperCase()!

That being said I still am not sure why the clicks aren’t playing sounds. I tried shifting the order in my handleClick function and it seems like it only cares about dispatching the action and if that statement isn’t first it won’t do anything at all.

[malarix]

I feel so dumb, I changed the element id for the key event but not the click event! The sound is playing when I click now and it passes all the tests, thank you for the help!