Bankpad sounds not updating-React-Drumpad Proyect

Hi

I have two object arrays that are not updating after the div is clicked. state is changing but button sounds are not, anyone knows why ?

Heres my codepen : https://codepen.io/tonytony92/pen/QWbQyxW

Two object arrays:

const bankOne = [{
  key:"Q",
  col:"blue",
  audioId: '1',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
}, {
  key:"W",
  col:"blue",
  audioId:'2',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
} ]

const bankTwo = [{
    key:"Q",
    col:'blue',
    audioId:'3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    key:"W",
    col:"blue",
    audioId:"4",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  } ]

Toogle Pad Bank Method

  togglePadBank(){
    if(this.state.buttonState===bankOne){
      this.setState({
        buttonState:bankTwo,
        padBankCol:"red",
       currentPadBank:"bankTwo"
      })
    console.log(this.state.buttonState)
    } 
      else if(this.state.buttonState===bankTwo){
        this.setState(
         { buttonState:bankOne,
        padBankCol:"blue",
       currentPadBank:"bankOne"}
        )
        console.log(this.state.buttonState)
      }   
  }

I took a look at your pen and noticed a few different issues. You have issues in both the handlesClick method and the handleKeyDown method. I will address the handlesClick method and you can use the information learned to fix the handleKeyDown method.

  1. The following code inside handlesClick, newState is an object, so you should just be setting the state to newState. Currently, you are assigning a nested object containing the newState object to this.state.
this.setState({
  newState  
})
  1. The following setTimeout call is not written to accomplish what I think is your goal. I have reformatted it (indented the code), so you might see the issue. You also have th same issue with newState that I described above that you will need to fix.

Hint: The , 2200 is not in the correct place.

setTimeout(()=> {  
  newState.buttonState[indx].col="blue"
  this.setState({
     newState  
   }),2200
})
  1. Your playSound method is not working, because even if you manage to change src attribute of the audio element, the browser does not know the src has changed and will continue to play the original sound loaded. To resolve this, you need to load the new sound. I will let you research this one on Google, so you can see how to properly do this.
1 Like

Hi, Mr Dawson , thanks for replying. I already changed the nested object for the newState object in this.setState and also changed setTimeout syntax, (thats why it didnt work…). setTimeout is now working but Im still researching to get the browser to play updated sounds.

By any chance should I embed the toggleBank function in componentWill Mount, to get the browser to update?

Thanks so much once again for your reply, Ive been stuck for over a week and your suggestions are really helpful.

@mwayuu The key word above is load. Research about loading sounds.

I would remove this from each object in the banks, since you are using the same color each time.

Hello Mr Dawson , thanks for your reply. I managed to find why the padBanks where not switching. My audio tags didnt have the key attribute. I added the key attribute and set it to the audioId property in state and its now working fine.

 <div style={{width:'100px', height:"100px", backgroundColor:this.props.color, margin:'3px', borderRadius:'10px',display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center'}} id={this.props.id} onClick={this.props.handleClick}><h3 style={{margin:'0px'}}>{this.props.id} </h3></div>
        <audio id={this.props.audioId} key={this.props.audioId}>
        <source src={this.props.urlSource}/>
        </audio>
     </div>

Here is how its looking now :

https://codepen.io/tonytony92/pen/QWbQyxW

also, I want buttons to change color separately every time they are clicked or keypressed so I didnt find any way to change them separately without including a separate color property in buttonState array.