Sending: status, disabled button, reset
The default message is sent; while the fake server works, the fieldset is disabled and the button says Sending…. After success form.reset() puts the textarea back to its default value, Great course!, not to empty. Type your own message and send it to see that. Clear the box and press Send to see the error path.
Handle a form with onSubmit on the <form>, stop the page reload with e.preventDefault(), read the fields with FormData and Object.fromEntries, track a sending status so the button is disabled while you wait, and reset the form when it's done.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a login form that logs { user, password } as an object on submit without reloading the page.
Add a status to a form so the button reads Saving… and is disabled for 500 ms after submit (use a fake setTimeout promise), then shows Saved!.
Explain it without notes
Why should you use onSubmit on the form instead of onClick on the button?
What does e.preventDefault() do in a submit handler, and what happens without it?
How do you turn a form's fields into a plain object, and what's the catch with checkbox groups?
Describe a robust way to handle sending a form to a server, including errors and double clicks.
What do React 19 form actions change compared with onSubmit?
Preview
Console
Nothing logged yet.Expected console output
sending { message: 'Great course!' }
button while sending: Sending…
sent, field is now "Great course!"