Drum Machine help passing FCC tests

#1

My Drum Machine works, however, I can’t pass a few of the FCC tests. I haven’t set any State information either. I’m very new to React, and Frameworks in general. The FCC tests require my audio elements to be children of my Drum Buttons, but I’m not sure how this would be done. Also, I haven’t done any styling really, so it’s pretty bare bones.

Here’s my code:

class DrumMachine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
    this.pressedKey = this.pressedKey.bind(this);
    this.pressedButton = this.pressedButton.bind(this);
   }
  
 componentDidMount() {
    document.addEventListener("keydown", this.pressedKey);
  }

  pressedKey(e) {
    switch(e.keyCode){
        case(65):
        document.getElementById("A").click();
        break;
        case(83):
        document.getElementById("S").click();
        break;
        case(68):
        document.getElementById("D").click();
        break;
        case(81):
        document.getElementById("Q").click();
        break;
        case(87):
        document.getElementById("W").click();
        break;
        case(69):
        document.getElementById("E").click();
        break;
        case(90):
        document.getElementById("Z").click();
        break;
        case(88):
        document.getElementById("X").click();
        break;
        case(67):
        document.getElementById("C").click();
        break;
  }}
  
  pressedButton = (button) => (e) => {
    e.preventDefault();
    switch(button) {
         case("q"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
    document.getElementById("display").innerHTML="<h1>Heater 1</h1>";
        break;
         case("w"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
       document.getElementById("display").innerHTML="<h1>Heater 2</h1>";
        break;
         case("e"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Heater 3</h1>";
        break;
         case("a"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Heater 4</h1>";
        break;
         case("s"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Clap</h1>";
        break;
         case("d"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Open-HH</h1>";
        break;
         case("z"):
document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Kick-n'-Hat</h1>";
        break;
         case("x"):
 document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Kick</h1>";
        break;
         case("c"):
document.getElementById("qsound").src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3";
    document.getElementById("qsound").currentTime=0;
    document.getElementById("qsound").play();
        document.getElementById("display").innerHTML="<h1>Closed-HH</h1>";
        break;
     }
  }
  
render() { return(
    <div id="drum-machine">
 <div class="btn-group">
  <button class="btn drum-pad" id="Q" onClick={this.pressedButton("q")}>Q</button>
  <button class="btn drum-pad" id="W" onClick={this.pressedButton("w")}>W</button>
  <button class="btn drum-pad" id="E" onClick={this.pressedButton("e")}>E</button>
 </div>
  <div class="btn-group">
    <button class="btn drum-pad" id="A" onClick={this.pressedButton("a")}>A</button>
    <button class="btn drum-pad" id="S" onClick={this.pressedButton("s")}>S</button>
    <button class="btn drum-pad" id="D" onClick={this.pressedButton("d")}>D</button>
   </div>
   <div class="btn-group">
     <button class="btn drum-pad" id="Z" onClick={this.pressedButton("z")}>Z</button>
     <button class="btn drum-pad" id="X" onClick={this.pressedButton("x")}>X</button>
     <button class="btn drum-pad" id="C" onClick={this.pressedButton("c")}>C</button>
      </div>
    <div class="songtext" id="display" />
     
     <audio class="clip" id="qsound" preload = "auto">This browser doesn't support html5</audio></div>
  )};
}
 
ReactDOM.render(<DrumMachine />,document.getElementById("root"));
#2

Uff you got a lot of code there. when you see repetitive code like that usually is a trigger for refactoring.

When i solved this one i created a component called Drum and i passed the name (letter) and the audio (or link to the audio) via props.

After that you can use a component for each letter like this

...
<Drum name="W" audioSrc="myAudioSrcForW.mp3" />
<Drum name="Z" audioSrc="myAudioSrcForZ.mp3" />
...

Here is the component im talking about.

import React from "react";

let drums = {
  Q: "BASS",
  W: "HARD KICK",
  E: "EFFECT",
  A: "KICK",
  S: "SNARE",
  D: "CLAP",
  Z: "SOFT KICK",
  X: "BIG SNARE",
  C: "HIT HAT"
};

export const Drum = ({ name, audioSrc }) => {
  let AudioRef = React.useRef();

  const clickListener = React.useCallback(() => {
    let btn = document.getElementById(`drum-btn-${name}`);
    try {
      AudioRef.currentTime = 0;

      AudioRef.play();
      btn.className = "active-drum";
      document.getElementById(`display`).innerHTML = drums[name];
      setTimeout(() => {
        btn.className = "";
      }, 10);
    } catch (error) {}
  }, [name]);

  React.useEffect(() => {
    const listenKeyPress = e => {
      if (e.key.toUpperCase() === name) {
        clickListener();
      }
    };
    //adding event listener
    document.addEventListener("keydown", listenKeyPress);

    //removing event listener when component unmounts
    return () => {
      document.removeEventListener("keydown", listenKeyPress);
    };
  }, [name, clickListener]);

  return (
    <div className="drum-pad" onClick={() => clickListener()} id={drums[name]}>
      <audio
        className="clip"
        ref={ref => (AudioRef = ref)}
        id={name}
        src={audioSrc}
      ></audio>
      <button id={`drum-btn-${name}`}>{name}</button>
    </div>
  );
};
#3