Uncaught Errors on update={this.props.location.pathname}

So some of the tours I’m using go through different pages. For example, I have a registration tour that guide the user on clicking on the “Sign up” button to go to the sign up page, and the tour continues on giving information about what to fill in 'till the “Submit” button.

I’ve set up the tour steps for the different paths and set update to this.props.location.pathname (update={this.props.location.pathname}). The issue I noticed when doing this is when the user is in, let’s say, step 5, and then changes page and the steps for that page have less than 5 steps, the steps update but the “current step number” doesn’t, so it tries to access steps[current] and it throws errors like this: There are also other spots in the code that it tries to access steps[current] attributes without verifying if it exists. So I think it is something to look at for future versions.

For now, is there a way of reseting the current number everytime the steps update or something like this?

[kaelhem]

@elrumordelaluz Nice! Thanks for that. I didn’t think to use the goTo like this. Good catch. Also, for posterity, I’ve updated the sample to be able to re-open the ‘main’ tour (with the startAt parameter set to 0). Now, I’ve got an easy way to make a lot of tours for my app 😃

Edit: Even better, I’m using a little helper to avoid repeating the: props => <Step {...props}> on each steps. Like this:

const steps = definitions => definitions.map(def => ({
  ...def,
  content: props => React.cloneElement(def.content, { ...props })
}))

(And I’ve updated the previous codesandbox code).

[elrumordelaluz]

Hey @kaelhem thank you for creating and sharing a sandbox.

I solved this particular use case with the following approach: since the step.content could be a func I switched into it the content for steps of first and second sections, like this:

// ...
first: (Step, onLoadTourSection) => [
  {
    selector: "#bt1",
-   content: <Step>the first button</Step>
+   content: props => <Step {...props}>the first button</Step>
  },
  {
    selector: "#bt2",
-    content: <Step>the second button</Step>
+   content: props => <Step {...props}>the second button</Step>
  }
],
// ...

Then, use the prop.goTo inside the Step Component to go back to 0 when clicking the button. something like this:

- const Step = ({ children }) => (
+ const Step = ({ children, goTo }) => (
  <div>
    {currentSteps !== "main" && (
      <button
        style={{ position: "absolute", left: 5, top: 5 }}
        onClick={() => {
          onLoadTourSection("main");
+          goTo(0);
        }}
      >
        back
      </button>
    )}
    {children}
  </div>
);

Since the main section has only one step, going to the step 0 you are sure the Tour will found an element in the Array.

Here is the working example. Please, let me know if this approach makes sense for you.