Bankpad sounds not updating-React-Drumpad Proyect

JavaScript
1

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)
      }   
  }
3

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.

6

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.