Keypress event handler

Tell us what’s happening:
Hi all, I’m a little confused on how the keyboard events work. I’ve created the event, and called it through OnKeyPress but it still isnt working. its like its not even there, can anyone help?
see on codepen: https://codepen.io/Logan_code/pen/poNwBMX

Your code so far

const arr = [
  {
    keyCode: 81,
    key:"Q" ,
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    keyCode: 87,
    key:"W" ,
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
  },
  {
    keyCode: 69,
    key:"E" ,
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  },
  {
    keyCode: 65,
    key:"A" ,
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  },
  {
    keyCode: 83,
    key: "S",
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  },
  {
    keyCode: 68,
    key: "D",
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  },
  {
    keyCode: 90,
    key:"Z" ,
    sound:'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  },
  {
    keyCode: 88,
    key: "X",
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
  },
  {
    keyCode: 67,
    key: "C",
    sound:'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'
  }
];

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      play:false,
    };
    this.playSound= this.playSound.bind(this);
    this.keyPress = this.keyPress.bind(this);
  }
  
  playSound(e){
    this.setState({
      play:!this.state.play,
    });

    const audio = e.target.querySelector('audio');

    audio.play();
    audio.currentTime = 0;
  }
 
   keyPress(e) {
    if (e.keyCode === this.props.keyCode) {
      this.playSound;
    }
  }
  
  componentDidMount(){
    document.addEventListener("PlaySound", this.playSound);
    document.addEventListener('keydown', this.keyPress);
  }
  componentWillMount(){
    document.removeEventListener("PlaySound", this.playSound);
    document.removeEventListener('keydown', this.keyPress);
  }
  
  render(){
    return (
    <div id="display">
      {arr.map((arr,i) =>(
        <div className="drum-pad" text={arr.key} key={i} id={arr.key} onClick={this.playSound} onKeyDown={this.keyPress}>{arr.key}
          <audio className="clip" key={i} src={arr.sound} id={arr.key} ref={this.audio}/>
         </div>
        ))}
    </div>
    );
  }
};

ReactDOM.render(<App />, document.getElementById("drum-machine"));

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Build a Drum Machine

Link to the challenge:

4 posts were merged into an existing topic: Drum machine - all pads play same sound

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been unlisted.

Thank you.