Challenge: Display a Summary of the Registration Data Before Submission

Overview:

In this challenge, you will enhance the "Registration Form" project by adding a feature to display a summary of the registration data before the final submission. This will help you practice managing state, conditional rendering, and enhancing user experience.

Objective:

• Learn how to manage and display a summary of form data.
• Practice conditional rendering and improving user experience in React.

Instructions for the Interactive Code Block:

Step 1: Create a State Variable for Preview Mode

Create a new state variable to manage whether the form is in preview mode or not. This will help you toggle between the form view and the summary view.

Step 2: Implement a Function to Toggle Preview Mode

Create a function that toggles the <strong>isPreview</strong> state. This function will be called when the user clicks the "Preview" button to switch to the summary view.

Step 3: Add a "Preview" Button

Add a "Preview" button to your form. When clicked, this button should trigger the <strong>togglePreview</strong> function to display the summary of the form data.

Step 4: Conditionally Render the Form or Summary

Use conditional rendering to display either the form or the summary based on the <strong>isPreview</strong> state. If <strong>isPreview</strong> is <strong>true</strong>, display the summary of the form data; otherwise, display the form.

Step 5: Display the Summary of Form Data

In the summary view, display the values of the form fields (<strong>username</strong>, <strong>email</strong>, <strong>password</strong>, <strong>confirmPassword</strong>). Provide an option to go back and edit the form if needed.

Next Steps:

• Improve the User Interface: Add styles to the summary view to make it visually appealing.
• Form Validation: Ensure that all validation errors are resolved before allowing the user to switch to the preview mode.
• Confirmation Message: Display a confirmation message or redirect the user after successful registration.

By completing this challenge, you will enhance your Registration Form project with a user-friendly summary view, allowing users to review and confirm their information before submission. This practice will help you improve state management and conditional rendering in React. Enjoy enhancing your form!

Hint Step 1: Use the <strong>useState</strong> hook to create a boolean state variable, e.g., <strong>isPreview</strong>.

// Create a state variable to manage preview mode
const [isPreview, setIsPreview] = useState(false);

Hint Step 2: The function should toggle the value of <strong>isPreview</strong> between <strong>true</strong> and <strong>false</strong>.

// Function to toggle preview mode
function togglePreview() {
  setIsPreview(!isPreview);
}

Hint Step 3: Place the button inside the form but outside of any form fields.

// Add a Preview button to toggle preview mode
<button type="button" onClick={togglePreview}>Preview</button>

Hint Step 4: Use a ternary operator or <strong>if-else</strong> statement for conditional rendering.

// Conditionally render the form or summary
return (
  <div>
    {isPreview ? (
      // Render summary of form data here
    ) : (
      <form onSubmit={handleSubmit}>
        {/* Form fields go here */}
        <button type="button" onClick={togglePreview}>Preview</button>
        <button type="submit">Register</button>
      </form>
    )}
  </div>
);

Hint Step 5: Use a simple div or list to display the form field values and a button to toggle back to the form view.

// Render summary of form data
<div>
  <h3>Review Your Information</h3><p>Username: {username}</p><p>Email: {email}</p><p>Password: {password.replace(/./g, '*')}</p> {/* Mask the password */}
  <p>Confirm Password: {confirmPassword.replace(/./g, '*')}</p> {/* Mask the password */}
  <button type="button" onClick={togglePreview}>Edit</button>
  <button type="submit" onClick={handleSubmit}>Confirm and Register</button>
</div>