Is it possible to set the current step to state?

[koiski]

If I do something like this:
getCurrentStep={curr => setState({ currentStep: curr })}
I get an error saying: "Cannot update a component from inside the function body of a different component"

Is there any way of setting the current step number to a state variable?

[Dieter103]

I'm using it in a function component and this works for me
getCurrentStep={(curr) => { setCurrentStep(curr); }}

[smartmock]

Hi. I experienced that too. IMO the problem is that the getCurrentStep function is invoked, and the Tour component gets rerendered due to the state change (if the Tour component depends on any state-managed properties). In this case, you have a cyclic dependency. Updating state triggers getCurrentStep what triggers the state change etc.

[koiski]

A workaround for this is setting a timout function
setTimeout(() => { setState({ currentStep: curr }); }, 0);

You can see here, why this works: https://www.gitmemory.com/issue/Paratron/hookrouter/110/604592927

[yanickrochon]

When you have setState({ currentStep: curr }), you essentially create a brand new state each and every time. Therefore, you trigger a component refresh. In a nutshell, this is the expectation :

const stateA = { foo: 1 };
const stateB = { foo: 1 };

stateA === stateB;   // false, consider a state change
stateA.foo === stateB.foo;  // true, state is the same

In other words, to prevent triggering a state change, compare currentStep inside of your state change. For example :

getCurrentStep={curr => 
    setState(prevState => prevState.currentStep !== curr ? { currentStep:curr } : prevState)
}

Essentially : if prevState.currentStep is different from curr, then create a new state, otherwise keep the previous one. In other words, setState(prevState => prevState) will never trigger a component update because the state does not change.