Basic form event delegation example

Form.jsx

import React, { useCallback, useState } from 'react'

const Form = () => {
  const [profile, setProfile] = useState({
    firstName: 'John',
    lastName: 'Johnsonian',
    jobTitle: 'Jabberwocky',
  })
  
  console.log(profile)
  
  const handleChange = useCallback((event) => {
    const { id, value } = event.target
    setProfile({ ...profile, [id]: value })
  }, [profile, setProfile])

  return (
    <form onChange={handleChange} className="form">
      <div className="form-section">
        <label htmlFor="firstName">First Name: </label>
        <input id="firstName" type="text" value={profile.firstName} />
      </div>
      <div className="form-section">
        <label htmlFor="lastName">Last Name: </label>
        <input id="lastName" type="text" value={profile.lastName} />
      </div>
      <div className="form-section">
        <label htmlFor="jobTitle">Job Title: </label>
        <input id="jobTitle" type="text" value={profile.jobTitle} />
      </div>
    </form>
  )
}