How do I setState when my drum-pad triggers an onClick function?

Question

I'm a newbie to React and currently building a drum-machine. I have wired up the drum-machine to play an audio contained inside its DrumPad child component.My problem is am failing make an id representing each audio display whenever its parent drum-pad div is clicked. I know I need to initialize state and then setState but I dont know how to implement it in my code.

here is my code

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

**soundData.js**

const soundData = [{ 

 letter:"Q",
 src:"https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav",
 id: "clap"

},{

 letter:"W",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav",
    id:"hihat"
 }, {

    letter:"E",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav",
    id:"kick"
  },{

    letter:"A",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav",
    id:"openhat"
   },{

    letter:"S",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav",
    id:"boom"
 },{

    letter:"D",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav",
    id:"ride"
 },{

    letter:"Z",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav",
    id:"snare"
 },{

    letter:"X",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav",
    id:"tom"
 },
{

    letter:"C",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav",
    id:"tink"
 }]

   export default soundData

why do you pass handleDisplay to the DrumPad component? and why do you need handleDisplay? — Kalhan.Toress
This code doesn't make any sense. It looks like you're trying to do several things at once and confusing them. — JMadelaine
@kalhan When a .drum-pad is triggered, I want a string describing the associated audio clip displayed as the inner text of the #display element. — Collins_obi
@JMadelaine like I said earlier, I'm new to React and this is my first project. I would love your help to make my code cleaner, thank you. — Collins_obi

Praveen Mathew Philip Praveen Mathew Philip · Accepted Answer · 2020-10-09T05:50:40

for updating the state, you need to pass the function handleDisplay to DrumPad and call the handleDisplay inside handleClick, passing the required data as parameters.

CodeSandbox

//App.js    
handleDisplay(key) {
    this.setState({
      display: key
    });
  }

//DrumPad.js
  function handleClick() {
    const audio = new Audio(props.data.src);
    audio.play();
    audio.currentTime = 0;
    props.handleDisplay(`${props.data.letter} : ${props.data.id}`);
  }

How do I setState when my drum-pad triggers an onClick function?

1 Answers