How to loop over again an array when it finishes? JavaScript

Question

Here is my code:

useEffect(() => {
    playerRef.current.seekTo(convertedflat[currentTimeIndex], 'seconds');
  });
  return (
    <>
      <main>
        <div className={style.main_container}>
          <NavBar />

          <div className={style.heronext}>
            <div className={style.hero_container}>
              <ReactPlayer
                ref={playerRef}
                playing
                controls={true}
                url={`videos/${episList[currentEpisodeIndex]}.mkv`}
                width="90%"
                height="55rem"
                />
               </div>

              <button
              className={style.next}
              onClick={() => {
                setCurrentTimeIndex((prevTimeIndex) => prevTimeIndex + 1) %
                  convertedflat.length;

                setcurrentEpisodeIndex((prevTimeIndex) => prevTimeIndex + 1) %
                  convertedflat.length;

                console.log(currentTimeIndex);
                console.log(currentEpisodeIndex);
              }}
            >
              Next
            </button>

basically when you click on the next button it moves to the next timestamp until the array finishes. but I want to it starts again when the array list is finished.Currently when the array navigation is finished it shows error.

I used % length but it doesnt work. Here is the error message when the list is finished:

TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.

acbay · Accepted Answer · 2021-12-02 12:03:26Z

1

You should be careful with these lines

setCurrentTimeIndex((prevTimeIndex) => prevTimeIndex + 1) % convertedflat.length;

I think there is a problem with brackets. It should be something like;

setCurrentTimeIndex((prevTimeIndex) => (prevTimeIndex + 1) % convertedflat.length);

answered Dec 2, 2021 at 12:03

acbay

8927 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabdol Over a year ago

Thank you it worked! What if I wanted add a previous button? setcurrentEpisodeIndex( (prevTimeIndex) => (prevTimeIndex - 1) % convertedflat.length ); this didnt work.

acbay Over a year ago

Of course, it wouldn't. If you still want to do it inline. You can do; setcurrentEpisodeIndex( (prevTimeIndex) => (convertedflat.length + prevTimeIndex - 1) % convertedflat.length );

Collectives™ on Stack Overflow

How to loop over again an array when it finishes? JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related