Next.js text cycling component never updates

Question

I'm trying to write what I thought would be a simple component: it takes an array of strings, and every three seconds the text in the div of the component is changed to the next item in the array, looping back to the beginning.

Although the console shows that the change message function is run every three seconds, the message never changes. I presume this is because the useState update never happens. Why is this, and how do I get it to work?

// components/textCycle.js
import { useState, useEffect} from 'react';

function TextCycle ( { array } ) {
  const [ msg, setMsg ] = useState(0);

  useEffect(() => { 
    function changeMsg() {
      setMsg((msg > array.length) ? 0 : msg + 1);
    }
    setInterval( changeMsg, 3000);
  }, []);

  return (
    <div>
     { array[msg] }
    </div>
  );
};

export default TextCycle;

score 0 · Answer 1 · answered Sep 29 '21 at 18:09

// components/textCycle.js
import { useState, useEffect} from 'react';

function TextCycle ( { array } ) {
  const [msg, setMsg] = useState(0);
function changeMsg() {
    setMsg((msg > array.length - 2) ? 0 : msg + 1);
}

useEffect(() => {
    setTimeout(changeMsg, 1000);
}, [msg]);

return (
    <div>
        {array[msg]}
    </div>
);
};

export default TextCycle;

Next.js text cycling component never updates

1 Answers1