Drum machine react

drumBank = [{name:…url…},{name:…,url:…}]
render() {
return(


{drumBank.map(key => {key.name})}

i want a function {this.playAudio} that play the audio for each btn i click , i couldn’t find a solution :confused:
this is my code : https://codepen.io/ahmed-derbel/pen/YBGjpb

So the place to start, do you have a means to know which button was clicked? Javascript gives it to you, but you aren’t using it at this point.

In your render, when you onClick={this.playAudio} in the buttons, there’s something being passed to playAudio that you aren’t catching. An Event object has been sent. In there, there’s a neat property that will tell you what you need. Change your playAudio a little:

function playAudio(eventObject){
  console.log(eventObject.target.id); //<-- this is the id of the clicked button, or the event.target
  // Can you use the id to tell which audio to trigger?
}
1 Like

very helpful ty sir ^^

Tried to give you a direction without giving you the answer outright. Glad it helped. :smiley:

1 Like