Hooks & State — Intermediate React challenge.
The traffic light housing and bulb layout are already built for you. Your job is the logic only: make it automatically cycle red -> green -> yellow -> red -> ... forever, with each color holding for its own fixed duration.
Requirements
- Layout (housing box, 3 circular bulbs, sizing/spacing) is provided — do not need to rebuild it.
- currentLight state starts at 'red' and advances through red -> green -> yellow -> red -> ... automatically via a timer.
- Each color holds for its own duration: red 4000ms, green 3000ms, yellow 1000ms.
- Timers are cleaned up on unmount / before the next timer starts — no leaked timers or double-advances.
- Only the bulb matching currentLight carries data-active='true' and its correct ACTIVE color; the other two use the shared INACTIVE_COLOR and no data-active attribute.
Signature
function TrafficLight(): JSX.Element
Example
<TrafficLight />
// mounts on red -> after 4s auto-advances to green -> after 3s more to yellow -> after 1s more back to red
Constraints
- Use useEffect keyed on currentLight to schedule the next transition, with proper cleanup (clearTimeout).
- Do not use setInterval with a single fixed duration — each color has a different hold time.
- Do not modify the provided housingStyle / bulbBaseStyle layout objects.