REACT: Registration Form

 RegistrationForm.js

1. Import Statements

j

import React, { useState } from 'react';

• React: Required to use JSX and React components.

• useState: A React Hook that allows functional components to manage state.

---

2. Component Definition

function RegistrationForm() {

• Defines a functional component named RegistrationForm.

---

3. State Management

Form Data State

const [formData, setFormData] = useState({
  name: '',
  email: '',
  password: '',
  confirmPassword: ''
});

• Stores form field values (name, email, password, confirmPassword).

• setFormData: Updates the state when inputs change.

Error State

const [errors, setErrors] = useState({
  name: '',
  email: '',
  password: '',
  confirmPassword: ''
});

• Tracks validation errors for each field.

Submission State

const [isSubmitting, setIsSubmitting] = useState(false);

• Prevents duplicate submissions by disabling the submit button during API calls.

---

4. Event Handlers

handleChange

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData({ ...formData, [name]: value });
  if (errors[name]) {
    setErrors({ ...errors, [name]: '' }); // Clear error on typing
  }
};

• Updates formData as the user types.

• Clears any existing errors for the field being edited.

---

5. Form Validation

validateForm

const validateForm = () => {
  let isValid = true;
  const newErrors = { ...errors };

  // Name validation
  if (!formData.name.trim()) {
    newErrors.name = 'Name is required';
    isValid = false;
  }

  // Email validation (regex pattern)
  if (!formData.email) {
    newErrors.email = 'Email is required';
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    newErrors.email = 'Please enter a valid email';
    isValid = false;
  }

  // Password validation (min 6 chars)
  if (!formData.password) {
    newErrors.password = 'Password is required';
    isValid = false;
  } else if (formData.password.length < 6) {
    newErrors.password = 'Password must be at least 6 characters';
    isValid = false;
  }

  // Confirm Password match
  if (formData.password !== formData.confirmPassword) {
    newErrors.confirmPassword = 'Passwords do not match';
    isValid = false;
  }

  setErrors(newErrors);
  return isValid;
};

• Checks for:

  • Required fields.

  • Valid email format (using regex).

  • Password length (≥6 characters).

  • Password confirmation match.

• Returns true if all validations pass.

---

6. Form Submission

handleSubmit

j

const handleSubmit = (e) => {
  e.preventDefault(); // Prevents page reload
  if (validateForm()) {
    setIsSubmitting(true);
    setTimeout(() => { // Simulates API call
      console.log('Form submitted:', formData);
      alert('Registration successful!');
      setIsSubmitting(false);
    }, 1000);
  }
};

1. Prevents default form submission.

2. Validates the form.

3. Simulates an API call with setTimeout.

4. Shows success feedback.

---

7. JSX (UI Rendering)

Bootstrap Structure

j

return (
  <div className="container mt-5">
    <div className="row justify-content-center">
      <div className="col-md-6">
        <div className="card">
          {/* Card Header */}
          <div className="card-header bg-primary text-white">
            <h3 className="mb-0">Register</h3>
          </div>
          {/* Card Body (Form) */}
          <div className="card-body">
            <form onSubmit={handleSubmit}>
              {/* Form fields go here */}
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
);

• 
  

• Bootstrap Classes Used:

  • container, row, col-md-6: Responsive grid.

  • card: Wraps the form for better styling.

  • mt-5: Adds top margin.

---

Form Fields (Example: Email)

<div className="mb-3">
  <label htmlFor="email" className="form-label">Email address</label>
  <input
    type="email"
    className={`form-control ${errors.email ? 'is-invalid' : ''}`}
    id="email"
    name="email"
    value={formData.email}
    onChange={handleChange}
  />
  {errors.email && <div className="invalid-feedback">{errors.email}</div>}
</div>

• 
  

• Key Features:

  • form-control: Bootstrap input styling.

  • is-invalid: Highlights invalid fields (if errors exist).

  • invalid-feedback: Displays error messages below the input.

---

Submit Button

javascript

Copy

<div className="d-grid">
  <button
    type="submit"
    className="btn btn-primary"
    disabled={isSubmitting}
  >
    {isSubmitting ? 'Registering...' : 'Register'}
  </button>
</div>

• d-grid: Makes the button full-width.

• disabled={isSubmitting}: Prevents multiple submissions.

• Dynamic button text (Registering... during submission).

---

8. Export

export default RegistrationForm;

• 
  

• Makes the component available for import in other files (e.g., App.js).

---

Key Takeaways for Students

1. State Management: useState tracks form data, errors, and submission status.

2. Validation: Real-time checks with user-friendly error messages.

3. Bootstrap Integration: Pre-styled components for rapid UI development.

4. Form Submission: Simulated API call with loading state.

5. React Best Practices:

   • Controlled components (inputs tied to state).

   • Conditional rendering (error messages).

   • Prevent default form behavior (e.preventDefault()).

This example is a great way to teach students how to build interactive forms in React with proper validation and feedback!