React Advanced

0% completed

Previous
Next
Code Challenge

Challenge 1: Controlled Form with Validation

Follow the instructions below to complete the challenge:

  1. Create a Form Component: Implement a Form component with three input fields:
  • Name (Required)
  • Email (Required, must be a valid email format)
  • Password (Minimum 6 characters)
  1. Use State to Manage Inputs:
  • Use useState to store the form data and validation errors.
  • Update the state when the user types in the fields.
  1. Validate Inputs in Real-Time:
  • Show an error message under each field if it's invalid.
  • The submit button should remain disabled if there are validation errors.
  1. Handle Form Submission:
  • Prevent form submission if validation fails.
  • If all inputs are valid, display an alert with the form data.

šŸ’”Bonus:

  • Add a show/hide password toggle feature.
  • Use useEffect to log validation status in the console.

Challenge 2: Enhance Form UX with useFormStatus Hook

Follow the instructions below to complete the challenge:

  1. Create a Form Component with Input Fields
  • Implement a FeedbackForm component that includes:
    • Name (required)
    • Email (required, must be a valid email format)
    • Feedback Message (required, minimum 10 characters)
  1. Use useFormStatus to Handle Submission State
  • Create a SubmitButton component that:
    • Uses useFormStatus() to check if the form is submitting.
    • Disables the button and shows "Submitting..." while the form is in progress.
  1. Display Submitted Data Temporarily
  • Use the data property from useFormStatus() to display a confirmation message: "Submitting feedback: {feedback message}" while pending.
  1. Handle Form Submission with a Custom Action
  • Create a mock function submitFeedback that simulates an async form submission.
  • Ensure the form resets after submission.

šŸ’”Bonus:

  • Prevent submission if fields are empty or invalid.
  • Add a character counter for the feedback message field.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next