Functional Component - How to set run to true and false ?

[akshilshah]

Hi,

When I initiated the joyride and after the tour has finished I set it to the local storage as false.

Refreshing the page thought the run var is set to false it still renders,

I have tried using the state as defined here: https://stackoverflow.com/questions/62718091/how-to-restart-a-react-joyride-tour-after-it-has-ended-in-a-functional-component
but that it runs into Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

How do I set up joyride correctly?

Any help will be much-appreciated thanks!

Code

<Joyride
          callback={handleJoyrideCallback}
          run={localStorage.getItem('joyride')}
          steps={JOYRIDE_STPES}
          continuous={true}
          showProgress={true}
          showSkipButton={true}
          styles={
            localStorage.getItem('joyride') && {
              options: {
                zIndex: 10000,
                primaryColor: 'rgb(28, 154, 70)'
              }
            }
          }
        />