Deviopath › React

Multi-Step Form Wizard

Hard · Forms

Build a 3-step sign-up wizard. Each step shows an <h2> like "Step 1 of 3".

- Step 1: <input name="name"> and a "Next" button. If the name is empty (after trimming), clicking "Next" shows <p className="error">Name is required</p> and stays on step 1.

- Step 2: <input name="email">, a "Back" button and a "Next" button. If the email does not contain "@", show <p className="error">Enter a valid email</p> and stay.

- Step 3: a summary <ul className="summary"> with two <li>: "Name: Ana" and "Email: ana@mail.com" (trimmed values), plus "Back" and "Submit" buttons.

"Back" goes to the previous step and keeps what was typed. Errors disappear when you move to another step. After "Submit", render only <p className="thanks">Thanks, Ana!</p>.

Next: Registration Form