Drum machine - GUI help needed

I have a project consisting of 2 classes. The App class has an array of soundfile URLs. The second, Drum, returns an audio element for each soundfile.

I’d like to create buttons, which, when pressed, play a soundfile. At this stage, I know how to create buttons and set their onClick event to call a method, but that’s about it.

A row of standalone buttons would suffice, although I see that others have created a grid of buttons resembling a pocket calculator.

import React from 'react';

import './App.css';

import Drum from './components/Drum'

class App extends React.Component {

state =

{

  sound_file_collection:

  [

  {

    index:0,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',

    text:'Q',

    id: 'PinkFloyd'

  },

  {

    index:1,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3',

    text:'W',

    id: 'Handclap'

  },

  { 

    index:2,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',

    text: 'Cymbal'

  },

  { 

    index:3,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',

    text: 'A',

    id:'AcousticGuitar'

  },

  { 

    index:4,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',

    text: 'S',

    id:'GlamRock'

  },

  { 

    index:5,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',

    text: 'D',

    id: "Queen"

  },

  { 

    index:6,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',

    text: 'Z',

    id: 'Tambourine'

  },

  { 

    index:7,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',

    text: 'X',

    id: 'DampenedDrum'

  },

  { 

    index:8,

    soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3',

    text: 'C',

    id: 'MetalDrum'

  }

  ]

  

}//end of state

   

render()

  {

    return (

    <div className="App" id="drum-machine">

    <Drum class = "drum-pad" soundfiles = {this.state.sound_file_collection} />

    </div>

        

  );

  }

}

export default App;

//Q, W, E, A, S, D, Z, X, C.



class Drum extends React.Component {

    render() {

      return this.props.soundfiles.map((eachfile) => 

      

      //drum-pad, then audio element

      <div key={eachfile.index} class = {this.props.class} id = {this.props.id}  text = {this.props.text}>

      <audio controls class = "clip" id = {this.props.text} source src={eachfile.soundFileURL} type="audio/mpeg">

      Your browser does not support the audio element.  

      </audio>

      

    </div>

      )

    }//render

  }//class

export default Drum;