As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code.
const [color, setColor] = useState("black")
const bubbleSort = async () => {
const sleep = ms => new Promise(res => setTimeout(res, ms));
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = 0; j < len; j++) {
setCurrentIndex(j)
console.log(j)
console.log(currentIndex)
if (arr[j] > arr[j + 1]) {
setColor("green")
console.log(color)
document.getElementById(`bar${j + 1}`).style.backgroundColor = color
let tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
setArr([...arr])
}
setColor("black")
await sleep(200)
}
}