React) keyPress updates all of data- attributes to one value?

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);
  }

So looks like it’s working now when I re-opened the project in a new tab. Does CodeSandbox cache your code? I made some modifications but it was still behaving as it was there. Anyways, go head and IGNORE this post.