Overview

Practice creating a basic form using the useActionState approach.

Requirements

• Use the useActionState hook to handle form submission and state management.
• Implement an action function that:
  • Validates that all fields (name, email, country) are filled.
  • Returns an error message if any field is missing.
  • Keeps the values the user already entered when validation fails.
  • Waits 1 second (simulating an async request) before returning a success response.
  • Resets the form fields after successful submission.
• Display:
  • A loading state (Submitting...) while the form is being processed.
  • An error message when validation fails.
  • A success message when submission completes successfully.
• Disable the submit button while submitting.

Notes

• useActionState receives the action function and an initial form state object.
• The action function should return the updated form state after validation or submission.
• Use the returned state object to show errors or success messages dynamically.
• Always use defaultValue for form inputs when controlled by useActionState.
• On validation error, return the submitted values so the inputs keep what the user typed; only clear them on a successful submission.
• The action prop on <form> should point to the function returned by useActionState.

Tests

1. shows error if fields are missing
2. keeps provided fields when validation fails
3. shows submitting state while waiting
4. shows success message and resets fields after submit