Forms in React

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button type="submit">Greet</button>
    </form>
  );
}

function BioForm() {
  const [bio, setBio] = useState('');

  return (
    <textarea
      value={bio}
      onChange={(e) => setBio(e.target.value)}
      placeholder="Tell us about yourself..."
      rows={4}
    />
  );
}

function CourseSelect() {
  const [course, setCourse] = useState('');

  return (
    <select value={course} onChange={(e) => setCourse(e.target.value)}>
      <option value="">Choose a course</option>
      <option value="python">Python</option>
      <option value="javascript">JavaScript</option>
      <option value="react">React</option>
    </select>
  );
}

function TermsCheckbox() {
  const [accepted, setAccepted] = useState(false);

  return (
    <label>
      <input
        type="checkbox"
        checked={accepted}
        onChange={(e) => setAccepted(e.target.checked)}
      />
      I accept the terms
    </label>
  );
}

function SignupForm() {
  const [form, setForm] = useState({ name: '', email: '', age: '' });

  const update = (field) => (e) => {
    setForm({ ...form, [field]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={form.name} onChange={update('name')} placeholder="Name" />
      <input value={form.email} onChange={update('email')} placeholder="Email" />
      <input value={form.age} onChange={update('age')} placeholder="Age" />
      <button type="submit">Sign up</button>
    </form>
  );
}