React: Change / Iterate an Element Color Every Second

Coding World

    return (
        <div className="header-container item">
            <div className="header-item title-container">
                    <h1 className="title" style={{color: colour1}}>HELLO</h1>
                    <h1 className="title" style={{color: colour2}}>CODING</h1>
                    <h1 className="title" style={{color: colour3}}>WORLD</h1>
            </div>
            <div className="header-item"/>
        </div>
    );

Say I have the above, I want to iterate through each element one at a time and turn the colour to gold.

So at any one time only one of the words should be gold. First Hello should be gold, then Coding should be gold and then World should be gold.

I tried to do it so it would change every second. There are example of how to change a colour every second but I can’t find an example of how to do it with three different element and so they don’t clash.

See my woeful attempt below

    const d = new Date();
    let time = d.getTime().toString().split("");
    console.log(time)
    const lastEl = time[time.length - 1]
    console.log("lastEl", lastEl)

    const [timer, setTimer] = useState(lastEl)

    const [colour1, setColour1] = useState("white")
    const [colour2, setColour2] = useState("white")
    const [colour3, setColour3] = useState("white")

    useEffect(()=> {
        if(parseInt(lastEl) === 0 || parseInt(lastEl) === 1 || parseInt(lastEl) === 2 || parseInt(lastEl) === 3) {
        setColour1("yellow")
        setColour2("white")
        setColour3("white")
        } else if (parseInt(lastEl) === 4 || parseInt(lastEl) === 5 || parseInt(lastEl) === 6) {
            setColour1("white")
            setColour2("yellow")
            setColour3("white")
        } else {
            setColour1("white")
            setColour2("white")
            setColour3("yellow")
        }
    }, [timer] )

Answer

Using setInterval it can be done as follows

function App() {
  const [time, setTime] = React.useState(1);
  const [speed, setSpeed] = React.useState(1000);
  const [colour1,setColour1] = React.useState("white");
  const [colour2,setColour2] = React.useState("white");
  const [colour3,setColour3] = React.useState("white");
  const timer = React.useRef(null);
  React.useEffect(() => {
    runInterval();
  }, []);
   React.useEffect(() => {
   
   window.clearInterval(timer.current);
    setTime(1);
    runInterval();
  }, [speed]);
  function runInterval(){
      timer.current = window.setInterval(() => {
        setTime(prevTime => prevTime >= 9 ? 1 : prevTime + 1);
      }, speed);
      return () => {
        window.clearInterval(timer.current);
      };
  }
   React.useEffect(() => {
    if([1,2,3].includes(time)){
        setColour1("yellow")
        setColour2("white")
        setColour3("white")
    }
    else if([4,5,6].includes(time)){
        setColour1("white")
        setColour2("yellow")
        setColour3("white")
    }
    else{
       setColour1("white")
       setColour2("white")
       setColour3("yellow")
    }
  }, [time]);
  return (
    <div>Seconds: {time}
    <button onClick={() => setSpeed(500)}>x2 speed</button>
     <button onClick={() => setSpeed(1000)}>normal speed</button>
      <div style={{backgroundColor: "black"}}>
         <h1 className="title" style={{color: colour1}}>HELLO</h1>
         <h1 className="title" style={{color: colour2}}>CODING</h1>
         <h1 className="title" style={{color: colour3}}>WORLD</h1>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>