A guestbook with a form action
No onSubmit, no preventDefault. The fields keep their text while the request runs and empty when the entry appears. Leave Name empty and press Sign: required stops the submit before React is involved.
Pass a function to <form action={fn}> (or formAction={fn} on a button) and React calls it with the form's FormData as an Action: no preventDefault, a pending state through the form hooks, and uncontrolled fields reset automatically when it succeeds; requestFormReset resets a form on demand.
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.
Build a newsletter form with an email field (type="email", required) whose action waits 300 ms and shows Subscribed: <email>.
Add an Approve and a Reject button to a form; both submit the same comment field but call different functions.
Explain it without notes
What happens when a form with action={fn} is submitted?
When does React reset a form after an action, and which fields are affected?
What is formAction for, and how does an action know which button was pressed?
When do you need requestFormReset?
Preview
Console
Nothing logged yet.Expected console output
action got Asha: Lovely course
right after submit, name box: Asha
after the action, name box: []
list: Asha: Lovely course