I’m currently stuck at the handleKeyPress function for my drum-machine. I cant figure out how to implement it in my code. Help please…
class App extends React.Component {
constructor(props){
super(props)
this.state = {
display : "",
}
this.handleDisplay = this.handleDisplay.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
}
componentDidMount(){
document.addEventListener("keydown", this.handleKeyDown)
}
componentWillUnmount(){
document.removeEventListener("keydown", this.handleKeyDown)
}
handleDisplay (key){
this.setState({display: key })
}
handleKeyDown (e){
//what code should go in here?
console.log(e.code)
}
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>
)
}
}
function DrumPad(props){
function handleClick(){
const audio = new Audio(props.data.src)
audio.play()
audio.currentTime = 0
props.handleDisplay(`${props.data.id}`);
}
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>
)
}