loop through an array and show single item at a time with dynamic time duration like setTimeout or SetInterval in react js

user_10802136 0
Viewed 1283

I have a Media.json file which has 6 media objects with (name, duration, fileType). I want to loop through them and want to show one single item at a time with dynamic duration according to media object duration property. i have tried this with setTimeout and SetInterval looping in and outside of them but still unable to do that. I am using react js with functional components. Help would be very appreciated. my example code.

const [mediaItem, setMediaItem] = useState({})
const items = [{ name: 'one' }, { name: 'two' }, { name: 'three' }];
const renderMedia = () => {
for (let i = 0; i < items.length; i++) {
  setTimeout(() => {
    setMediaItem(items[i]);
    console.log(mediaItem);
  }, 5000);
}
// return items[currentIndex].name;

};

Thanks

reactjs state setinterval arrays loops
1 Answers

Issue

  1. The for-loop is completely synchronous code. When updating react state in a loop you must use a functional state update, otherwise each subsequent enqueued update overwrites the previous update.
  2. The for-loop is in the component body which means each time the component rerenders due to the state update, another set of enqueue state updates will be set.

Solution

If you wanted to queue up all updates in a synchronous loop then it should be done once in a mounting useEffect hook and apply a delta to the timeouts so they don't all expire at the same time.

useEffect(() => {
  items.forEach((item, i) => setTimeout(
    () => setMediaItem(item),
    (i + 1) * 5000, // 5000, 10000, 15000
  ));
}, []);

It may be a bit easier to use/store an array index in state and increment that on an interval.

const items = [{ name: "one" }, { name: "two" }, { name: "three" }];

function AppExample() {
  const [mediaItem, setMediaItem] = React.useState(items[0]); // <-- seed initial state
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const timerId = setInterval(
      () => setIndex((i) => (i + 1) % items.length), // <-- increment index
      2000
    );
    return () => clearInterval(timerId);
  }, []);

  React.useEffect(() => {
    setMediaItem(items[index]); // <-- update media state when index updates
  }, [index]);

  return (
    <div className="App">
      <div>Media: {mediaItem.name}</div>
    </div>
  );
}

Edit loop-through-an-array-and-show-single-item-at-a-time-with-dynamic-time-duration

user_86908570
Related