我是 React 的新手，目前正在構建鼓機。我已經連接鼓機來播放包含在其 DrumPad 子組件中的音頻。我的問題是，每當單擊其父鼓墊 div 時，我無法創建一個代表每個音頻顯示的 id。我知道我需要初始化狀態然后設置狀態但我不知道如何在我的代碼中實現它。這是我的代碼import React from 'react';import './App.css';import soundData from "./soundData.js"import DrumPad from "./drumPad.js"class App extends React.Component {  constructor(props){   super(props)     this.state = {       display : "hello",      }      this.handleDisplay = this.handleDisplay.bind(this)    }     handleDisplay (){   this.setState({display: }) //what do i need to do here? }    render(){        return(     <div      id="drum-machine"      >            <div     id="display"     >       {this.state.display}     </div>     {soundData.map((data) =>      (        <DrumPad         data={data}         key={data.letter}         id = {data.id}        handleDisplay = {this.handleDisplay}                         />      ))}     </div>    )     }  }export default App;**drumPad.js**import React from "react"function DrumPad(props){      function handleClick(){                const audio =  new Audio(props.data.src)        audio.play()        audio.currentTime = 0                 }         return(            <div             className= "drum-pad"             id = {props.data.id}             onClick = {handleClick}            >                <h1>{props.data.letter}</h1>                <audio                 className = "clip"                 id = {props.data.letter}                 src = {props.data.src}                                />                        </div>        )    }    export default DrumPad