- If you don’t, you could end up with a very big wizard step wrapper component that handles the sanitizing, validation, and transformation of user input from all the steps in one place, and that will be hard to maintain.Since each step is responsible for it’s own data, it should have some type of validation and handle any transformation of user input into an appropriate data structure.
- This also means that each form will have it’s own button that will move the currentStep forward or backwards.The basic wizard component outlined earlier will have to loose those Prev/Next buttons since the _next and _prev functions will be passed in as props.And a step will look like this:Note how this example is also missing a Prev button and _prev.
- If this example did have that button, the _prev function would mirror the _next function.Linkable Steps with location.hashIn some cases, it’s good to have the wizard steps be linkable (i.e. It’s pretty easy to handle this hash based navigation using vanilla JS:State Machines are CoolTying this all together is the state machine that manages the current step.If you’re working on a wizard that only has one possible set of screens — meaning that the choices the user makes don’t affect what screens are shown — the state machine outlined in the examples should work fine.The path that a user follows to complete a wizard is made up of a series of wizard steps.
- When the required wizard steps change based on information the user has input (for example, signing up for a business account vs. a personal account), that’s when it’s necessary to use a more robust state machine to manage the user’s path.
- Having a place where the available steps are checked also makes it easier to do validations on past data and re-surface required or skipped steps.A contrived example of a complicated wizard that can be easily handled with a robust state machineState machines are a huge topic for another post.
The wizard is a tried and true design interaction pattern. It’s great for on-boarding new users or inputting information tied to some type of decision tree. Under the hood, a wizard nothing more than…
Continue reading “Writing a Wizard in React – Lee Gillentine – Medium”