React Forms: Handle Multiple Input Fields with useState

import { useState } from "react";

function RegistrationForm() {
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    course: "react",
    agreeToTerms: false
  });

  function handleChange(event) {
    const { name, value, type, checked } = event.target;

    setFormData(prevData => ({
      ...prevData,
      [name]: type === "checkbox" ? checked : value
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Submitted:", formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="fullName"
        value={formData.fullName}
        onChange={handleChange}
        placeholder="Full name"
      />

      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email address"
      />

      <select name="course" value={formData.course} onChange={handleChange}>
        <option value="react">React Development</option>
        <option value="node">Node.js Backend</option>
        <option value="fullstack">Full Stack</option>
      </select>

      <label>
        <input
          type="checkbox"
          name="agreeToTerms"
          checked={formData.agreeToTerms}
          onChange={handleChange}
        />
        I agree to the terms
      </label>

      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;