Issue with display on keyPress for Project 3 of Front End Libraries

[kikosacoff]

Hey there!

Hope everyone is doing great.

I’m having an issue with the Drum Machine project, although I’m passing all the tests.

Issue:
Display of the sound played is not showing when I press the corresponding key, although I’m able to log it in the console and I can play the sound with no issue.

Codepen

Code:

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

class DrumMachine extends React.Component{
  constructor(props){
    super(props)
    this.playSound = this.playSound.bind(this)
    this.onKeyPressed = this.onKeyPressed.bind(this)
    this.state = {
      lastDrumPlayed: ''
    }
  }
  
  componentWillMount() {
      document.addEventListener("keydown", this.onKeyPressed.bind(this));
  }

  componentWillUnmount() {
      document.removeEventListener("keydown", this.onKeyPressed.bind(this));
  }      
  
  onKeyPressed(e) {
    const keyId = e.key.toUpperCase();
    console.log(document.getElementById(keyId).parentNode.id)
    this.setState({lastDrumPlayer: document.getElementById(keyId).parentNode.id})
    document.getElementById(keyId).play();
  }
  
  playSound(event){
      const id = event.target.innerText;
      document.getElementById(id).play();
      this.setState({lastDrumPlayed: event.target.id})
    }
  
  render(){
  return(
   <div id="drum-machine">
      <div id="display">
        <button className="drum-pad" id="chord-1" onClick={this.playSound}>Q
          <audio className="clip" id="Q" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="chord-2" onClick={this.playSound}>W
          <audio className="clip" id="W" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="chord-3" onClick={this.playSound}>E
          <audio className="clip" id="E" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="hi-hat-open" onClick={this.playSound}>A
          <audio className="clip" id="A" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="hi-hat-closed" onClick={this.playSound}>S
          <audio className="clip" id="S" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="crash" onClick={this.playSound}>D
          <audio className="clip" id="D" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="snare-1" onClick={this.playSound}>Z
          <audio className="clip" id="Z" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="snare-2" onClick={this.playSound}>X
          <audio className="clip" id="X" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        <button className="drum-pad" id="bass-drum" onClick={this.playSound}>C
          <audio className="clip" id="C" src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/12[kb]80s-Bdrum1.wav.mp3" />
        </button>
        {this.state.lastDrumPlayed}
      </div>
   </div>
   )}
}

ReactDOM.render(<DrumMachine/>, document.getElementById('root'))

[c0g1t8]

You have a typo in your setState of onKeyPressed. lastDrumPlayer should be lastDrumPlayed. Easy to miss.