I've been working on solving a React issue and followed a tutorial on YouTube. I'm using CodeSandbox for my project, but I'm facing a problem where the colors of the signal are not showing up and do not change after some time. I even tried using setTimeout, but it didn't work. Can anyone help me figure out how to fix this? Below is a snippet of my code.
import "./styles.css";
import { useState, useEffect } from "react";
type stopLightState = "stop" | "slow" | "go";
const stop_delay = 3000;
const slow_delay = 2000;
export default function App() {
const [state, setState] = useState<stopLightState>("stop");
function getStopLightClass(light: StopLightState) {
return `light $(light)` + (state === light ? "on" : "");
// stop interpolate
}
useEffect(() => {
if (state === "stop") {
setTimeout(() => setState("go"), stop_delay);
} else if (state === "slow") {
setTimeout(() => setState("slow"), slow_delay);
}
}, [state]);
return (
<div className="stopLight">
{/* <div className={"light stop" + (state === "stop" ? " on" : "")}>here</div> */}
<div className={getStopLightClass("stop")}>here</div>
<div className={getStopLightClass("slow")}>here</div>
<div className={getStopLightClass("go")}>here</div>
</div>
);
}