Problem 19

Fix the Multi-step Wizard

HARDDEBUG

React+3

A 3-step wizard has two production bugs. Bug 1: double-clicking "Next" fires validation twice and can jump two steps at once. Bug 2: clicking "Back" while validation is pending causes the stale result to silently advance the wizard after the user has already navigated away. Find both bugs in the starter code and fix them.

Examples

Example 1

Input

User clicks next-btn on step 2 (validation pending), then clicks back-btn

Output

User is on step 1. When step 2 validation later resolves true, nothing happens — wizard stays on step 1.

Constraints

next-btn must be disabled while validateStep is pending
Do not advance the wizard if the user navigated away before validation resolves
next-btn must re-enable after validateStep resolves so the user can try again

Follow-up

How would you extend this to support validation that can reject (throw an error), showing an error message on the current step without advancing or going back?

Hints

Related Practice

Track

React

Keep moving through related react problems and build a stronger search-friendly practice loop around this topic.

Controlled Form with Validation

easy

Problem 16

Add Error Handling and Retry to Data Fetcher

medium

Console output will appear here...