Preserve the state of invisible/unrendered components about react-wizard-primitive

[Jibbedi]

Hi,

thanks a lot for your thoughtful comment. I really appreciate the effort you put into this :-)

The main idea about this library is that it will manage the state of the wizard and let the user decide anything else like how the form state is stored or how components are rendered.

For the example you've mentioned, I made the decision that only the active component should be mounted.

Now there lies the problem for you. Every time a component is unmounted (i.e. is not the currently active step) it loses its state.

Knowing this will leave us with a couple of possible solutions.

1. Don't unmount the components when they're not visible but hide them using CSS.
   https://codesandbox.io/s/wizard-custom-abstraction-forked-3rt3u

This will keep the state around but it will still be hard to get the complete state in the final step.

2. What we can do instead is lifting the state up, as you've already pointed out :-)
   https://codesandbox.io/s/wizard-custom-abstraction-forked-9bm1f

In this example, I'm storing the state inside of the Custom Wizard Component and pass a helper to set and read the state for a form field via context.
But you can do this basically any way you want. If your form is fairly complex you might consider a form library like Formik that works in perfect harmony with react-wizard-primitive :-)

Let me know if you need help setting this up, I'm happy to help :-)

[eggerand13]

Thank you very much for your thorough response and also the provided examples. I am sure that they will guide other people who are researching similar questions in the future.

Unfortunately I was already under a little time pressure. Therefore I searched for other possible solutions and finally decided to use this package https://www.npmjs.com/package/react-step-wizard. It is also rather unopinionated but has the advantage (if you consider it an advantage) that the components are not unmounted and I don't have to personally care about unmounting/mounting them.

The reason being is that I have some rather complex controlled components (not just simple forms) as my wizard steps and it would have been a lot of work (and maybe cause performance issues) to rework them so that the wizard completely manages their state.

Thank you anyway. You answered my question. I'll just leave this issue open in case you want to add anything more.

[Jibbedi]

Sure :-) Glad you found a solution that works for you.
All the best! :-)