Multi-step wizard state

Hooks & State — Advanced React challenge.

Build a 3-step signup wizard (Account Info → Profile Details → Review & Submit) using useReducer to manage the current step and all collected form data together. Next is guarded per step — you can't advance without filling in required fields — and going Back never loses what you already typed.

Requirements

• wizardReducer.js exports initialState ({ step: 1, formData: { email, name, bio } }) and a pure wizardReducer(state, action) function.
• UPDATE_FIELD updates a single formData field without touching the step or other fields.
• NEXT advances the step but never past 3; BACK decreases it but never below 1.
• An unrecognized action.type throws an Error.
• Step 1 requires email before Next is enabled; step 2 requires name (bio is optional).
• Step 3 reviews everything entered across steps 1 and 2, and its Submit button calls onComplete(formData) with the full collected object.
• Navigating Back at any point preserves previously entered field values.

Signature

function wizardReducer(state: { step: number; formData: object }, action): { step: number; formData: object }
function SignupWizard({ onComplete: (formData: object) => void }): JSX.Element

Example

wizardReducer({ step: 1, formData: { email: "", name: "", bio: "" } }, { type: "UPDATE_FIELD", payload: { field: "email", value: "a@b.com" } })
// ⇒ { step: 1, formData: { email: "a@b.com", name: "", bio: "" } }

Constraints

• wizardReducer must be a pure function — no side effects, no mutation of the incoming state object.
• Do not use useState for step/formData — useReducer must own both.