Hi
I have two object arrays with two different PadBanks, bankOne and BankTwo. Everytime TogglePadBank div is clicked , the buttonState state property in this.state changes to point to either one of those PadBanks. Im console logging this.state and it is actually changing but whenever I click on padkeys it seems as state never changed. Anyone knows why components are not updating? Would Really appreciate some help
here is my pen: https://codepen.io/tonytony92/pen/QWbQyxW?editors=1011
and here is my code so far:
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'
} ]
class Buttons extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<div style={{width:'100px', height:"100px", backgroundColor:this.props.color}} id={this.props.id} onClick={this.props.handleClick}><h3>{this.props.id} </h3></div>
<audio id={this.props.audioId}>
<source src={this.props.urlSource}/>
</audio>
</div>
)
}
}
class MyApp extends React.Component{
constructor(props){
super(props)
this.state={
buttonState:bankOne,
padBankCol:"blue",
currentPadBank:"bankOne"
}
this.handlesClick=this.handlesClick.bind(this)
this.handleKeyDown=this.handleKeyDown.bind(this)
this.playSound=this.playSound.bind(this)
this.togglePadBank=this.togglePadBank.bind(this)
}
handlesClick(event){
let indx=""
let clickId=event.target.id
let newState=Object.assign({},this.state)
for(let i=0;i<this.state.buttonState.length;i++){
if(this.state.buttonState[i].key===clickId){
let soundId1=this.state.buttonState[i].audioId
indx=i
newState.buttonState[i].col="red"
this.setState({
newState
})
this.playSound(soundId1)
}
}
setTimeout(()=>{
newState.buttonState[indx].col="blue"
this.setState({
newState
}),2200
})
}
handleKeyDown(event){
let indx=""
let keyPress=String.fromCharCode(event.keyCode)
console.log(keyPress)
let newState=Object.assign({},this.state)
for(let i=0;i<this.state.buttonState.length;i++){
if(this.state.buttonState[i].key===keyPress){
let soundId1=this.state.buttonState[i].audioId
indx=i
newState.buttonState[i].col="red"
this.setState({
newState
})
this.playSound(soundId1)
}
}
setTimeout(()=>{
newState.buttonState[indx].col="blue"
this.setState({
newState
}),1000
})
}
playSound(id){
let sound=document.getElementById(id)
sound.play()
}
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)
}
}
render(){
document.addEventListener("keydown",this.handleKeyDown)
return(
<div>
<div style={{width:'400px',height:'400px', display:'flex',flexDirection:'row',backgroundColor:'green'}}>
<Buttons id="Q" color= {this.state.buttonState[0].col} handleClick={this.handlesClick} urlSource={this.state.buttonState[0].url} audioId={this.state.buttonState[0].audioId}/>
<Buttons id="W" color={this.state.buttonState[1].col} handleClick={this.handlesClick} audioId={this.state.buttonState[1].audioId} urlSource={this.state.buttonState[1].url} />
<div style={{width:"100px",height:"50px",position:"relative",backgroundColor:this.state.padBankCol,left:"70px",top:"100px"}} onClick={this.togglePadBank}>Pad Bank Toggle</div>
</div>
</div>
)
}
}
ReactDOM.render(<MyApp />, document.getElementById('root'))