Multi-Step Form Wizard in React With a useReducer State Machine

import { useReducer, useCallback } from 'react';
import { wizardReducer, initialState } from './wizardReducer';

export function useWizard(steps, initialData) {
  const [state, dispatch] = useReducer(wizardReducer, undefined, () =>
    initialState(steps, initialData)
  );

  const setField = useCallback(
    (name, value) => dispatch({ type: 'SET_FIELD', name, value }),
    []
  );

  const next = useCallback(() => dispatch({ type: 'NEXT' }), []);
  const back = useCallback(() => dispatch({ type: 'BACK' }), []);

  const step = steps[state.stepIndex];

  return {
    step,
    data: state.data,
    errors: state.errors,
    stepIndex: state.stepIndex,
    total: steps.length,
    isFirst: state.stepIndex === 0,
    isLast: state.stepIndex === steps.length - 1,
    setField,
    next,
    back,
  };
}

import React from 'react';
import { useWizard } from './useWizard';
import { AccountStep } from './AccountStep';
import { ProfileStep } from './ProfileStep';
import { ReviewStep } from './ReviewStep';

const steps = [
  {
    Component: AccountStep,
    validate: (d) => {
      const e = {};
      if (!d.email) e.email = 'Email is required';
      if (!d.password || d.password.length < 8) e.password = 'Min 8 characters';
      return e;
    },
  },
  { Component: ProfileStep },
  { Component: ReviewStep },
];

export function FormWizard({ onComplete }) {
  const w = useWizard(steps, { email: '', password: '' });
  const Step = w.step.Component;

  const handleNext = () => {
    if (w.isLast) {
      const errors = steps[w.stepIndex].validate?.(w.data) ?? {};
      if (Object.keys(errors).length === 0) onComplete(w.data);
      return;
    }
    w.next();
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <p className="wizard-progress">
        Step {w.stepIndex + 1} of {w.total}
      </p>

      <Step data={w.data} errors={w.errors} onChange={w.setField} />

      <footer className="wizard-footer">
        {!w.isFirst && (
          <button type="button" onClick={w.back}>
            Back
          </button>
        )}
        <button type="button" onClick={handleNext}>
          {w.isLast ? 'Submit' : 'Next'}
        </button>
      </footer>
    </form>
  );
}

import React from 'react';

export function AccountStep({ data, errors, onChange }) {
  return (
    <fieldset>
      <legend>Account details</legend>

      <label>
        Email
        <input
          type="email"
          value={data.email}
          onChange={(e) => onChange('email', e.target.value)}
          aria-invalid={Boolean(errors.email)}
        />
        {errors.email && <span className="error">{errors.email}</span>}
      </label>

      <label>
        Password
        <input
          type="password"
          value={data.password}
          onChange={(e) => onChange('password', e.target.value)}
          aria-invalid={Boolean(errors.password)}
        />
        {errors.password && <span className="error">{errors.password}</span>}
      </label>
    </fieldset>
  );
}