Help finishing react drum machine

JavaScript
1

I am down to the last challenge of having the display show the name of the sound.

I dont know how to send the data from my Pad components up to App where my state.display is. I even commented out my Display component and made the display a simple h1 in the App componenent so it wouldnt have to travel back down to a separate display component until i figure it out.

I feel like im getting a little better but this is really sending me through a loop lol

drumMachine3 (codepen.io)

2

You can not data upwards instead you can pass setState to the Pad component

const setDisplay = (a)=>this.setState(a)

<Pad 
             id={item.id}
             url={item.url}
             name={item.keyTrigger}
             trigger={item.keyTrigger}
             code={item.keyCode}
             setDisplay={setDisplay}
             
              />

playSound = ()=>{
    const audio = document.getElementById(this.props.trigger);
    audio.play();
    this.props.setDisplay({dis:this.props.id})
    
  }
1 Like
3

wow that is brilliant.

thank you

1 Like
4

i think i understand what was going on above but i must be missing something. It looks like passing the setDis function down to grab what is being sent up by props.

Can anyone help with what i am missing?

5

It works with an arrow function but not a regular function?!?!?!?

My mind just blew it’s top

does it have to do with the ‘this’ part of ‘this.setState’???

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.