#15form useActionState

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.
  • 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.
• The action prop on <form> should point to the function returned by useActionState.

Tests

1. shows error if fields are missing
2. shows submitting state while waiting
3. shows success message and resets fields after submit