Something is wrong with my React code. "Build a Drum Machine"

[amejl172]

https://codepen.io/DKPK/pen/dyNXpzN

class Title extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "Drum Machine"
    };
  }
  render() {
    return (
      <>
        <h1 className="text-center" id="Title">
          {this.state.title}
        </h1>
        <h2 id="Slogan">
          Ready to <i id="DWord">Drum?</i>
        </h2>
      </>
    );
  }
}

class Drum extends React.Component {
  constructor(props) {
    super(props);
    this.play = this.play.bind(this);
  }
  play(str) {
    var audio = document.getElementById(str);
   audio.play();
  }
  render() {
    return (
      <>
        <Title />
        <div id="drum-machine">
          <div id="display">
            <button onClick={this.play(Q)} class="drum-pad" id="1">
              Q
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
                class="clip"
                id="Q"
              />
            </button>

            <button onClick={this.play(W)} class="drum-pad" id="2">
              W
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
                class="clip"
                id="W"
              />
            </button>

            <button onClick={this.play(E)} class="drum-pad" id="3">
              E
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
                class="clip"
                id="E"
              />
            </button>

            <button onClick={this.play(A)} class="drum-pad" id="4">
              A
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
                class="clip"
                id="A"
              />
            </button>

            <button onClick={this.play(S)} class="drum-pad" id="5">
              S
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
                class="clip"
                id="S"
              />
            </button>

            <button onClick={this.play(D)} class="drum-pad" id="6">
              D
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
                class="clip"
                id="D"
              />
            </button>

            <button onClick={this.play(Z)} class="drum-pad" id="7">
              Z
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
                class="clip"
                id="Z"
              />
            </button>

            <button onClick={this.play(X)} class="drum-pad" id="8">
              X
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
                class="clip"
                id="X"
              />
            </button>

            <button onClick={this.play(C)} class="drum-pad" id="9">
              C
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
                class="clip"
                id="C"
              />
            </button>
          </div>
        </div>
      </>
    );
  }
}
let node = document.getElementById("app");
ReactDOM.render(<Drum />, node);

[Sylvant]

Hi, you should look your console first, when trying to figure out what is going wrong. It said cannot read property undefined of Q, or something along the lines. I checked your Q and you have passed Q as a parameter to the play() method. But you did not define Q. I mean, you passed is a variable, but there is no var Q='Q' for example. This was the case with all your play functions. So i put each parameter in quotation marks, so they are not treated as undefined variable, but as strings, since your play method accepts parameters of strings. So it end up as play("Q") instead play(Q). Need to do that for all your play methods. Next the console couldnt read the parameter you passed. This is because this is not how you pass parameters to on click functions. You use this syntax- onClick={this.play("Q")} (well without the quotation marks for Q), which does not work in the case. The onclick methods are called like this {this.play}, not {this.play()} , i.e. you cant pass parameters to them. In order to execute a react component method while passing it a parameter, one way to do it is defined another function and within it, execute the method with its parameter passed or- {()=>this.play("Q")} . I hope you are familiar with ES6 syntax(if not i strongly advise you get familiar, as its greatly efficient in react). What the example i shown you does is, when click happens, it executes that function, which on its turn call the component method, while this time, passing it a parameter(notice how the function does not take a parameter, just like the method couldnt, when it was called preemptively, but you can pass parameters within the body function). So, you must again edit your buttons callback functions with the syntax i explained. As i did so, your app rendered, altho i did not test further if its functionality work, i leave that to you

[amejl172]

They are doing music now, what I need now is, make them work by tapping the keys.

Thanks for the help. Can I get help with making them work with tapping the keys?