← Return

React Contact FormMedium

You need to create a simple React application called "Contact Form" that collects user information and displays it below the form upon submission. This task will help you practice handling form inputs, validation, and conditional rendering in React.

Detailed Requirements

  1. Form Structure:
    • The form should have the following fields:
    • Name: Text input for the user's name.
    • Email: Text input for the user's email address.
    • Message: Textarea for the user's message.
  2. Form Submission:
    • There should be a "Submit" button to submit the form.
  3. Form Validation:
    • Validate that none of the fields are empty upon submission.
    • If any field is empty, display an error message: "All fields are required." The form should not be submitted.
  4. Displaying Submitted Data:
    • If the form is successfully submitted, display the entered information below the form.
    • Clear the input fields after a successful submission.