Almost done with Drumpad Proyect-but power button not working,please help

Hi

Ive almost finished my wood drumpad proyect but Im having issues with a power button that was just recently added. The power button’s purpose is to activate the keypad so that sounds are only played when the button is on. the button has an onClick attribute set to trigger togglePowerSwitch function that sets state for buttonState. buttonState holds the audio urls for the sounds associated with buttons component. togglePower sets urls to an empty array so they are no longer able to be played when button is off.

What is peculiar is that togglePower is actually changing state for the backgroundColor property for the power button and also the keypads buttons and when console logging this.state , urls are actually changed to an empty string. But sounds are still playing when the power button is off.

Anyone knows what could be the issue?

Here is my codepen: https://codepen.io/tonytony92/pen/QWbQyxW?editors=1111

this is togglePower:

togglePower(){
    
    if(this.state.powerStatus==="true"){
      let newState=Object.assign({},this.state)
      newState.powerStatus="false"
      newState.powerSwitchBorder="none"
      newState.powerColor="rgb(32,32,32)"
      newState.buttonState.forEach(element=>{
        element.col="gray";
        element.url="";
      })
      this.setState(newState)
      console.log(this.state)
    } 
    else if(this.state.powerStatus==="false"){
      let newState=Object.assign({},this.state)
      newState.powerStatus="true";
      newState.powerSwitchBorder="2px solid green";
      newState.powerColor="orange"
      this.setState(newState)
      console.log(this.state)
    }
  }

this are the two bank Objects that are associated with buttonState prop in this.state:

let bankOne = [{
  key:"Q",
  col:"rgb(102, 26, 0)",
  audioId: 'Chord-1',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
}, {
  key:"W",
  col:"rgb(102, 26, 0)",
  audioId:'Chord-2',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
},{
  key:"E",
  col:"rgb(102, 26, 0)",
  audioId:'Chord-3',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'
},{
  key:"A",
  col:"rgb(102, 26, 0)",
  audioId:'Shaker',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'
},{
  key:"S",
  col:"rgb(102, 26, 0)",
  audioId:'Open-HH',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'
},{
  key:"D",
  col:"rgb(102, 26, 0)",
  audioId:'Closed-HH',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'
},{
  key:"Z",
  col:"rgb(102, 26, 0)",
  audioId:'Punchy-Kick',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'
},{
  key:"X",
  col:"rgb(102, 26, 0)",
  audioId:'Side-Stick',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'
},{
  key:"C",
  col:"rgb(102, 26, 0)",
  audioId:'Snare',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'
}  ]

let bankTwo = [{
    key:"Q",
    col:'rgb(102, 26, 0)',
    audioId:'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    key:"W",
    col:"rgb(102, 26, 0)",
    audioId:"Heater-2",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  } ,{
    key:"E",
    col:"rgb(102, 26, 0)",
    audioId:"Heater-3",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  },{key:"A",
    col:"rgb(102, 26, 0)",
    audioId:"Heater-4",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'} , {
      key:"S",
    col:"rgb(102, 26, 0)",
    audioId:"Heater-6",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
    },{key:"D",
    col:"rgb(102, 26, 0)",
    audioId:"DrumSet-Oh",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'},{
      key:"Z",
    col:"rgb(102, 26, 0)",
    audioId:"Kick-n-Hat",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
    },{
    key:"X",
    col:"rgb(102, 26, 0)",
    audioId:"Kick-1",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
    },{
      key:"C",
    col:"rgb(102, 26, 0)",
    audioId:"Cev-H2",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
    }]

and this is the MyApp state:

class MyApp extends React.Component{
  constructor(props){
    super(props)
    this.state={
      buttonState:bankOne,
      padBankStatus:"flex-start",
      currentPadBank:"bankOne",
      currentSound:'',
      currentVolume:0.5,
      powerStatus:"false",
      powerColor:"rgb(32,32,32)",
      powerSwitchBorder:"none"
    }

Hi @mwayuu,

If I understood your question correctly, you were saying that the sounds were still playing even when the power button was off?

I just went to your codepen, and things seem to be working as expected. Were you able to track down the problem?

Also, I really like the design you did! The wood look is cool, and the ability to change to another pad bank is pretty cool also.

Nice job!