Delay in for loop for Simon game - reactjs

Question

I am new to React, so I am probably not using best practices. I am trying to build this "Simon Says" game, but I am stuck trying to put delay in between each of my for loops, they run at the same time. I've looked at other solutions for this but they don't seem to fit with mine. I've also tried using setTimeout but that just plays all the animations at once after the delay. This is the for loop and the functions i want to have a delay in between:
newRound() {
this.setState({
pcSequence: this.state.pcSequence.concat(
Math.floor(Math.random() * 4) + 1)
},() => {
this.state.pcSequence.forEach(element =>
this.startAnimations(element)
);
}
);
}
startAnimations(element) {
if (element == 1) {
this.activeBtn1(0);
} else if (element == 2) {
this.activeBtn2(1);
} else if (element == 3) {
this.activeBtn3(2);
} else if (element == 4) {
this.activeBtn4(3);
}
}
Thanks!!

Answer 1

Hi I like your question and manage to get it working, i will share code below:
state = {
pcSequence: [],
}
componentDidMount() {
this.newRound();
}
newRound() {
this.setState({
pcSequence: [1,4,3,2]
},() => this.startSequence()
);
}
startSequence() {
if (this.state.pcSequence.length > 0) {
setTimeout(() => {
this.startAnimations(this.state.pcSequence.pop());
this.startSequence();
}, 1000) // 1000ms === 1 second
}
}
startAnimations(element) {
if (element === 1) {
console.log('element 1', element)
} else if (element === 2) {
console.log('element 2', element)
} else if (element === 3) {
console.log('element 3', element)
} else if (element === 4) {
console.log('element 4', element)
}
}
you can call this.newRound each time you want to reset buttons and also fill the array in a better way, yours is only filling the array with 1 item not 4 like [1] or [4]
Hope it helps!

Answer 2

I found help elsewhere and wanted to show what I did in case anyone else ever comes along looking for something similar. I removed the for loop and used map:
newRound() {
this.setState({
pcSequence: this.state.pcSequence.concat(
Math.floor(Math.random() * 4) + 1),
round: this.state.round + 1
},() => {
this.state.pcSequence.map((element,index)=> {
setTimeout(() => {
this.startAnimations(element);
}, index * 1000);
})
}
);
}
startAnimations(element) {
if (element == 1) {
this.activeBtn1(0);
} else if (element == 2) {
this.activeBtn2(1);
} else if (element == 3) {
this.activeBtn3(2);
} else if (element == 4) {
this.activeBtn4(3);
}
}