Cycle Loop through an array in REACTJS

Question

I am trying to cycle loop through an array of items, when the end of the array has been reached it should go back to the first item in the array, I have the following code it's not behaving the way I would like it to, and the dom doesn't update and my approach is not working!


  const items = ["item-1", "item-2", "item-2", "item-3"];
  var count = useRef(0);

  useEffect(() => {
    setInterval(() => {
      if (count.current <= items.length) count.current = count.current++;
      else count.current = 0;
    }, 3000);
  });

  return (
    <>
      <p> {items[count]} </p>
    </>
)

mxvrnv · Accepted Answer · 2022-07-14 06:28:39Z

items[count] won't work because the variable count is a ref object. To access it's value you need to write count.current. So it should be items[count.current].
Updating a ref object doesn't lead to a re-render, so even if you apply the fix from previous step you will only see the first item rendered.

You might want to try using useState instead:

import { useState, useEffect } from 'react';

const items = ["item-1", "item-2", "item-2", "item-3"];
function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setCount(previousCount => previousCount + 1 );
        }, 3000);
        return () => clearInterval(interval);
    }, []);
   
    const index = count % items.length;
    return <p>{items[index]}</p>;
}

EDIT: please note that inside items array you have the same item item-2 twice. So you might want change the items array to ["item-1", "item-2", "item-3", "item-4"]

Collectives™ on Stack Overflow

Cycle Loop through an array in REACTJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related