component-party/components/2-templating/6-conditional/TrafficLight.jsx

import { useState, useMemo } from "react"

const TRAFFIC_LIGHTS = ["red", 'orange', "green"]

export default function TrafficLight(){

    const [lightIndex, setLightIndex] = useState(0)

    const light = useMemo(() => 
      
    TRAFFIC_LIGHTS[lightIndex]
    , [lightIndex]);

    function nextLight(){
        if(lightIndex + 1 > TRAFFIC_LIGHTS.length - 1){
            setLightIndex(0)
        } else {
            setLightIndex(lightIndex + 1)
        }
        
    }

    return (
        <>
            <button onClick={nextLight}>Next light</button>
            <p>Light is: {light}</p>
            <p>
                You must 
               
               {light === "red" && <span>STOP</span>}
               {light === "orange" && <span>SLOW DOWN</span>}
               {light === "green" && <span>GO</span>}
            </p>
        </>
    )
}