// src/App.jsx
import { useState } from "react";

function NameForm() {
  const [formData, setFormData] = useState({ firstName: "", lastName: "" });

  function handleChange(e) {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  }

  return (
    <div>
      <form>
        <input name="firstName" value={formData.firstName} onChange={handleChange} placeholder="First name" />
        <input name="lastName" value={formData.lastName} onChange={handleChange} placeholder="Last name" />
      </form>
      <p>Hello, {formData.firstName} {formData.lastName}</p>
    </div>
  );
}

function App() {
  return <NameForm />;
}

export default App;

/*
  Notes:
  - Both inputs share the same handleChange function — each input's
    own name attribute ("firstName" or "lastName") tells the handler
    which key in formData to update.
  - ...prev keeps the other field's value intact whenever one field
    changes; without it, typing in one input would wipe out the other.
*/