Hey guys working on drum machine project here.
Initially, each pad is assigned correct data-key, but as soon as I hit a key. All the buttons update to that data-key. Can someone explain why please?
You just need to look at DrumMachine.js
and components/Pads/Pads.js
.
Here is a snippet to start off. I think handleKeyPress method is the problem…
hitPad = soundURL => {
const sound = this.getAudio(soundURL);
sound.play();
};
handleKeyPress = e => {
// document.querySelector("[data-key='1']")
console.log("key code", e.keyCode);
const button = document.querySelector(`[data-key="${e.keyCode}"]`);
const soundURL = button.dataset.sound;
this.hitPad(soundURL);
console.log("button", button);
};
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress);
}