Reset Current Index when new list of stories are rendered

[tobyonono]

Hi, I'm using the stories as a full page solution with a nav bar on the side to toggle between a different arrays of images/videos depending on what's clicked. I'm using a state variable for the stories prop to control this.

The issue I'm having is that once I click on a new nav item, it correctly renders the new story items from the corresponding array but the index starts from where the previous one left off, instead of starting from the beginning. I've tried setting the currentIndex to 0 so that it will always reset on click but no luck there.

Nav Items:

<li className='active:border-blue-400'> <button className="pointer-events-auto opacity-50 hover:opacity-100 active:text-white" onClick={() => setStoryState(Press)}> <span className="w-12">001</span> <span className='w-12 ml-1 mr-1'>-</span> <span>HOME</span> </button> </li> <li> <button className="pointer-events-auto opacity-50 hover:opacity-100" onClick={() => setStoryState(Archive)}> <span className="w-12">002</span> <span className='w-12 ml-1 mr-1'>-</span> <span>ARCHIVE</span> </button> </li>

Stories:

<Stories className='bg-black' currentIndex={0} loop keyboardNavigation defaultInterval={8000} stories={storyView} width={'100vw'} height={'100vh'} />

[realamirhe]

Add a new key for each Stories component will solve the issue

<Stories 
  key={`something-unique-per-your-hole-storyView`}
  className='bg-black' 
  currentIndex={0} 
  loop 
  keyboardNavigation 
  defaultInterval={8000} 
  stories={storyView} 
  width={'100vw'} 
  height={'100vh'} 
/>