Help with app structure for multi-step forms

[lozcalver]

Hi all!

I’m looking for some advice on how to structure components for an (in-browser) app I’m building. It’s part of a “product builder”, essentially the visual appearance is something like:

|| ✅ Step 1 (complete) ✅ ||

||      ⏳ Step 2 ⏳       ||
|  Step 2 fields show, as  |
|  it’s the current step   |

||      🚫 Step 3 🚫       ||

||      🚫 Step 4 🚫       ||

As you can see all of the steps are visible at all times, but their fields are only visible when the step is active. Should I have one component for each route which contains all 4 steps with the applicable active/complete props set? Will that limit what transitions I can use, given that all the steps will be re-rendered when the route changes with that approach?

Or is it possible to have conditional rendering logic at a higher level, so I only need to render the steps once and they can update their own appearance based upon whether they're active/complete?

Any suggestions/tips appreciated!

---

Additional info:

• The app needs “deep linking” into any step (used for pre-built links to products with 3 of the 4 steps already filled out, for example). I’m thinking I should nested routing because some steps may have multiple fields - it seems much easier to use query strings to hold those values rather than try to build URLs like app/step1value/step2value etc.
• The app is fed from a GraphQL endpoint, the options in each step depend on the values selected in previous steps. Because of this, the steps must be completed in the correct order - no skipping straight to step 4 for example. I’m assuming this is relatively simple as I can perform checks within each component to verify that the user has reached that step and their previous selections are actually valid.