如何在 React 中将音频添加到鼓机？

Question

I am doing FCC drum machine project in React and trying to add audio on the buttons, but could not add the sound. Can someone check that where I am making a mistake. Help is extremely appreciated.

React:

class App extends React.Component {  
  constructor(props) {  
    super(props);
      this.state = {    
         drumPads : [   
          {  
            id: "Q",  
            src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
            beat: "Heater-1",
          },
          {
            id: "W",
            src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
            beat: "Heater-2"
          },
    }     

 handleClick(id, beat) {
     return () => {
        document.getElementById(id).play();
        this.setState({
          beatName: beat,
         });
     };
  }

  render() {
      return (
        this.state.drumPads.map((button, i) =>
        <button key={i} id={beat} onClick={this.handleClick(id, beat)}>
             <h1>{ button.id }</h1>
             <audio src={button.src} />
        </button>
       )
    )
   }
 }

  ReactDOM.render( <App />,
     document.getElementById("root")
   )

Answer 1

You need to change this part of the code: id={beat} because you're just creating two buttons with the same id. What you mean to do is id={button.beat} . Check if that works.