form.jsx

const SimpleForm = ({ onSubmit }) => {
  // We use useState hook to store the forms data
  const [formState, setFormState] = useState({
    name: '',
    address: '',
    pet: '',
  });

  // a function to handle the form submission
  const handleSubmit = (ev) => {
    ev.preventDefault();
    onSubmit(formState);
  };

  // finally, a function that is called when any of our inputs change, wrapped 
  // in useCallback for, you know, performance
  const updateField = useCallback((ev) => {
    const { name, value } = ev.currentTarget;
    setFormState((current) => ({ ...current, [name]: value }));
  }, []);

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={formState.name} name="name" onChange={updateField} />
      <input type="text" value={formState.address} name="address" onChange={updateField} />

      <select value={formState.pet} onChange={updateField} name="pet">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="fish">Fish</option>
      </select>

      <input type="submit" value="Save" />
    </form>
  );
};