Drum machine click handler

JavaScript
1

I’m working on my drum machine project, and everything has been going well, until I tried introducing the click handler. For some reason I can’t get the click to do anything. Here is my code so far.

import React, { Component } from 'react';

const data = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants.com/media/sounds/bass-drum.mp3' },
  { id: 'bongo', letter: 'E', src: 'http://tipiwiki.free.fr/snd/Percussion(4e)2.wav' },
  { id: 'tom tom', letter: 'A', src: 'http://www.denhaku.com/r_box/sr16/sr16tom/loelectm.wav' },
  { id: 'bass 3', letter: 'S', src: 'http://billor.chsh.chc.edu.tw/sound/bass4.wav' },
  { id: 'shotgun', letter: 'D', src: 'http://david.guerrero.free.fr/Effects/ShotgunReload.wav' },
  { id: 'high hat', letter: 'Z', src: 'http://www.denhaku.com/r_box/tr707/closed.wav' },
  { id: 'drum hit', letter: 'X', src: 'http://www.masterbits.de/sc_docu/sounds1/1TM00013.MP3' },
  { id: 'laser', letter: 'C', src: 'http://www.sa-matra.net/sounds/starcontrol/Umgah-Backzip.wav'  },
]

class DrumPad extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this);
  }
  
  
  handleClick = () => {
    this.audio.play()
    this.audio.currentTime = 0
  }
  
  render() {
    return (
      <div className = 'drum-pad' id = {this.props.id}>
        <span>{this.props.letter}</span>
        <audio 
          ref = {ref => this.audio = ref}
          className = 'clip'
          src = {this.props.src} 
          id = {this.props.letter}>
          onClick={this.handleClick}
        </audio>
      </div>
      )
  }
}


class App extends Component {
  render(){
    return(
      <div id = "drum-machine">
        <div id = "display"></div>
        <div id = 'drum-pads'>
          {data.map(d => (
            <DrumPad
              id = {d.id}
              letter = {d.letter}
              src = {d.src}
            />))}
        </div>
      </div>
      
    )
  }
}


export default App```
2

I’m also working on the Drum Machine right now!

I’ll drop you a hint: Audio element doesn’t take onClick, it takes onPlay.

Maybe there are some other ways to play sound, but I’m detecting onClick on .drum-pad as mentioned in the requirements and then calling audio.play() manually on the audio element.

Disclaimer: I’ve not implemented the above logic yet. In theory, this should work.

Just take the onClick to the .drum-pad div and you should be good. (As this is also a requirement as per the guidelines of the project).
The reason it’s not working right now because Audio element doesn’t take onClick. It takes onPlay, onEnded etc.