How can I re-initialize the tour?

[jestrickler]

I am filtering the steps in a useEffect. If I turn on debug it seems that joyride initializes with the initial list of steps, but is not updated once the steps are filtered. This is messing up the placement of the first step, essentially showing the 1st filtered step with the placement of the original 1st step. Once the tour finishes and is relaunched, it re-initializes and looks fine. Is there some way I can programmatically force this re-initialization?

Additional details: I've mapped 'disableBeacon: true' throughout the steps to run with no beacon using a 'run' state flag, and I'm calling the helper function reset(true) on ACTIONS.CLOSE in the callback to set the tour back to step 0 on the next run.

[jestrickler]

I added a key to the tour component and incremented it to force the component to re-initialize.

[mattclister]

Resting tour at end of tour

I'm adding this, as it took me a while to figure out and I coulnt't find the answer anywhere. This is in Typescript.

// Imports
import Joyride, { StoreHelpers, Step} from 'react-joyride';

// Array of your steps with type Step[]
const steps: Step[] = [
  {
    target: '#userEmail',
    content: "Welcome! Feel free to sign up, or click 'Next' to use the Demo login details",
  },
];

// Use ref to store values returned by the function prop callback
 const joyrideHelpers = useRef<StoreHelpers | null>(null)

// Function that will trigger EVERY time Joyride state is updated. It will reset the tour if the status is ready, which I found to be the final status when tour is finished, or skipped.
  const handleTourEnd = (data: any) => {
    if (data.status === "ready" ){joyrideHelpers.current?.reset(true)}
  }

  return (
      <Joyride
        steps={steps}
        run={true}
        getHelpers={(helpers) => (joyrideHelpers.current = helpers)}   // Returns the reset function we need 
        callback={(data)=>handleTourEnd(data)}. // Returns the data and status we need
      />}