How do I add a handleKeyPress function to my drum machine

JavaScript
1

Hello everyone, I’m new to React and currently building the fcc-drumMachine project. Cant figure how to add a handleKeyPress event to my code to pass the 6th test and update the this.state.display. Please help me out here.

here’s my code

class App extends React.Component {
  constructor(props){
   super(props)
     this.state = {
       display : "",
      }
      this.handleDisplay = this.handleDisplay.bind(this)
    }

    
 handleDisplay (key){
   this.setState({display: key })
 }


    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>

        )
    
}
2

You’ll need to add an event listener for the keypresses, something like this:

document.addEventListener('keydown', logKey)

function logKey(e) {
  console.log(e.code)
// Your code goes here.
}

You will want to add this event listener in componentDidMount