How can I play my audio clip with a click? drum machine

Everything is working but the click and I cant figure out why! Please tell me what I am doing wrong.

[quote=“alina1, post:2, topic:357091, full:true”]
I did it this way:

  1. in the App component:
    pads are DrumPad components:
 <DrumPad key = {item.keyCode} // key code, like 81 for 'Q'
                 clip = {item.url} // the clip that plays when pressing the pad
                 id = {}  // id of this pad
  1. in the DrumPad component:
    let sound = document.getElementById(this.props.keyTrigger); // get the audio component
    sound.currentTime = 0;
    sound.volume = 0.5;;

    return (
      <button className = 'drum-pad'
              key = {this.props.keyCode} 
              id = {}
              onClick = {this.handleClick}
            <audio className='clip' id={this.props.keyTrigger} src={this.props.clip}></audio>

You may look here for the complete project:

Thank you for the tip. I like how you used map() to render all the buttons. I tried to use the same method, simplifying my code to see how it would work, but I can’t get it to render.

This has been driving me around the bend, will try this to see if I can get a sound to play.