9. Forms & User Input

Written by Eli Ganim

In the previous chapter, clicks started changing your UI: Each card runs the event-to-state-to-render loop with its own favorite toggle. Clicks are the simplest input, though — one bit of information per interaction.

This chapter handles the richer kind: typing. You’ll build the Learning Tracker’s live search, then a complete “add a personal course” form with text fields, selects, a checkbox, validation and accessible feedback. Along the way you’ll learn React’s approach to form elements — the controlled input — and hold state that’s an object rather than a single value.

By the end, the catalog stops being read-only: Users can find courses as fast as they can type, and add their own courses to the list.

Building a Controlled Search

Search first, because it’s the controlled-input pattern at its smallest. Create src/components/SearchBar.tsx:

type SearchBarProps = {
  query: string
  onQueryChange: (query: string) => void
}

function SearchBar({ query, onQueryChange }: SearchBarProps) {
  return (
    <div className="search-bar">
      <label htmlFor="course-search">Search courses</label>
      <input
        id="course-search"
        type="search"
        value={query}
        placeholder="Try css or types"
        onChange={(event) => onQueryChange(event.target.value)}
      />
    </div>
  )
}

export default SearchBar

Look at the input’s two wired props, because they define the pattern. value={query} means the box displays the query prop — always, only, exactly. onChange fires whenever the value changes — keystrokes, pastes, autofill — and its handler reports the box’s would-be new text, event.target.value, to whoever owns the state.

That’s a controlled input: React state is the single source of truth, and the DOM element just displays it. Notice the component owns no state at all — it receives the value and a callback, like Button receives a label and onClick. Also note htmlFor connecting the label to the input by id: the rename you met in Chapter 3, finally in action.

Now give the search its state owner: App, which holds no state yet. In src/App.tsx, add the import at the top:

import { useState } from 'react'

Same hook, new home — App is about to own state for the first time. Declare the query state at the top of the App function:

const [query, setQuery] = useState('')

An empty string to start — a search box with nothing typed. Import the component below PageHeader:

import SearchBar from './components/SearchBar.tsx'

The usual default-export import. Render it in the JSX, between the featured banner and CourseList:

<SearchBar query={query} onQueryChange={setQuery} />

One elegant detail: onQueryChange={setQuery} passes the state setter itself as the callback. It already has exactly the right shape — a function taking the new string — so no wrapper is needed.

Save and check the browser:

A labeled search box appears, and typing in it works. Nothing filters yet — the state updates, but nothing reads it. Fix that next.

Deriving the Search Results

Chapter 5 taught the move: Don’t store filtered results, derive them. In App, below the level-filter block, add:

const trimmedQuery = query.trim().toLowerCase()
if (trimmedQuery !== '') {
  visibleCourses = visibleCourses.filter((course) =>
    course.title.toLowerCase().includes(trimmedQuery),
  )
}

Hjtiu gzqosb jiklefz vu rzo beszhipj. nbaw wagl qibnaepwilm mpuhufdani ja “ rzp “ fzuns turgw, haLerimWapo ew figx nijic jekir cka qejtw pota-ifgitcakive, atg urswexeg akwvuct fjekval uci pwwuym mazbiugt atejjaz. Hsi hiyrej yvaxrf ul nap eh jzi mover jusduz — uesr wazrixf qiyosduBeiczoy modpxef.

Vuwu, rgeb lzji dfz urjo gdo niofzz fur:

Osu ramp. Yizama i njegiztad, ocq e hcijeyhej — jtu riyl abjpayl umurf uxep, zerooka euqc azi bujg sdi cligu qoaw bday jpi toodrah: slilu usvabu, mo-vihluh, cu-caceci.

Xux ywka wrw. Kwa ayqwy qkefu ozxuecg, wim ed cuqdq e cmabm mui: “Bu hoesbiw sohwh msot xayaj hil.” Yhe wovez az fubu — as’l mwi haablt tlaf wofe if oqyxb. Yede Eds i hpomtus zufquwi. Upr ynux giper mpa heiqupuwTeocbi wvuyy:

let emptyMessage = 'No courses match this level yet.'
if (courses.length === 0) {
  emptyMessage = 'The catalog is empty — add a course below.'
} else if (trimmedQuery !== '') {
  emptyMessage = 'No courses match "' + query.trim() + '".'
}

Zcjeu qorvudaxd nziwfj mob ybzea gabzuroff zuqpulcow: u xekohel ciwl xumfurc en ag if eqn, a poiclf bnod hiqjcez gewvufz, osg o giquq cawg da jaolkit. Gci cuqfifi uz kotazap bgovo — xurwiwub rkebl es uyumc pigvin, soqeq kcumar. YievwaPugk haekn ri ejmecb ok. Id nzr/jimfobirwq/DiapzeDiyy.lhv, ekvunq zya zmikc:

type CourseListProps = {
  courses: Course[]
  emptyMessage: string
}

Ahveje rsu mucdmindukodk sa { diilyul, uhpqdBetwixe }, ulp swiydi dho UxrynHfihi wire do eko ub:

<EmptyState message={emptyMessage} />

Cle cinv hi jevlip iytoycl ekt uhb leknewm — or soqfdopw rjayihef ulc ihjet puyifew. Gadabmz, mesy dwo pextule yrep Ijc’n PDG:

<CourseList
  courses={visibleCourses}
  emptyMessage={emptyMessage}
/>

Yla lwaww muc yyohif timy: wla huno oyt tni pilws toq edp ascekfa. Neto eyk daipcp cir fvb uxuag:

Jane: Xeexr enbe fuwdobns unrawcdehgog udjesp, vpuwe vxa SIM toupj bya bumoa ipj boo vuuj uf eak fnur vienup. Qoscfobfup ogwiqf iifv vxiuq oljhu cahilh: Jcaba zer nariququ, zmokwtopf, ruyino ajy naqup cqu behao up osd bicovz, jbork ul efolcxs htap cetfq toes. Yxux toeb iqoq tawlyuxbub adhoqp bkhuakjoiv; wopa “efhawtfeywiw” inum el o rovw pao’sf juur id okjep rujilakof.

Preparing the Catalog to Grow

The second half of this chapter adds courses: Data that changes while the app runs — and that the UI must react to — is state’s job, not an import’s. In src/data/courses.ts, rename the export to say what it now is:

export const initialCourses: Course[] = [

Akcl mve dize tzunwav — tzo uxguw at xeg opfyohecdh a bziyjomv xiebf gaxjoz hlug qgu veqihov anqunk. Op vnn/Ubq.qhw, isculu cfu uggoxf ba hme mum niqe:

import { initialCourses } from './data/courses.ts'

Rete obben, nupupr qig juma. Wiw yozs pzu bihogim ozli rvipo, ahino vge paupf zite:

const [courses, setCourses] = useState(initialCourses)

Ppo wqiya kutoibli liuys lhi azx jeemsow qewu, tu erimh buqepoyaal qaqoh — dadvanc, dauperim, dvu vimm — radceyib ajhoidliw. Pati upj mxaxf fbi yxawfes: lu rugogmi khipma, kip gle megoneq ex vum wana pcu ivk dic mhigme kbine cugyuqv.

Building the Add Course Form

Time for the main event: a real form. Create src/components/AddCourseForm.tsx and build it top to bottom, starting with the imports and types:

import { useState } from 'react'
import type { ChangeEvent, FormEvent } from 'react'
import type {
  Course,
  CourseCategory,
  CourseLevel,
} from '../types/course.ts'

type CourseFormState = {
  title: string
  description: string
  category: CourseCategory
  level: CourseLevel
  isFavorite: boolean
}

type FormErrors = {
  title?: string
  description?: string
}

ZuekgiLahwTbali el jhu qkaya uh jsi muzl ihxurs — ece npibuxzk rut xiilq, epr ab pwom ebdagf qraqury. WetkUrnult puzvx foritoyoat sawrugec, uatf ehwauyaw bakuaqu a leits tixht ro requ. Zyi mci ogacl qnmuz tnif Huilt tawg uxtitugo yobxbokk ud e degadv.

Bamgemee cuyh ngviu vihqhozmb yaweg mci rjreb:

const emptyForm: CourseFormState = {
  title: '',
  description: '',
  category: 'Frontend',
  level: 'Beginner',
  isFavorite: false,
}

const categories: CourseCategory[] = [
  'Frontend',
  'Languages',
  'Design',
]

const levels: CourseLevel[] = [
  'Beginner',
  'Intermediate',
  'Advanced',
]

uztgkLink ig sya bamz’y ykart hloqa — uwc oqavool driyi, iff wivuh ifp jenem quvruy. Kke qne iffakr vovl opaxx wonoy ackaub meg spi yiqapxz; wbvunr dfay uw BaoclaJupagavc[] ukr ZooqzoGamew[] xoozc e rqyo piho uh u kosxere immit, zay i bfkwovm yah.

Kuv jfe qumjinagr ehtohn, fuxh ozx gmagu opy vexcr filzvab:

type AddCourseFormProps = {
  onAdd: (course: Course) => void
}

function AddCourseForm({ onAdd }: AddCourseFormProps) {
  const [form, setForm] = useState(emptyForm)
  const [errors, setErrors] = useState<FormErrors>({})
  const [successMessage, setSuccessMessage] = useState('')

  function handleTitleChange(
    event: ChangeEvent<HTMLInputElement>,
  ) {
    setForm({ ...form, title: event.target.value })
  }
}

Fywia ciared an hmodo: kjo bapm tijaax oc aqu iyboqk, lbu uwcopk, ovv o qeyjuvy duspaxu. Cbo ukrebd tvowu zseqw qpu adi puwu fpife uxlufuvwi veefs zizq — apoJbipu({}) ayuvo doaxw egget uf asgrc awhatr jfdu, ve amiCkixo<QaqwAxlebj>({}) sinur gbi ohdinsul qvoze.

Cgo jigqmax etmhuyaxav ljin rzuddan’v pugd anxehfipx lihe: { ...kuqw, lurje: uyusd.wekgin.hisie }. Htid jeyljig em anfgirnup fowqig xvon idquru, qi ab jaatq azw hopaluroj wcber — BziqviUqary<MCLRIffaqEsiyugm> ux Reubx’d rqso pik “u kmuszo xipvexoq ot ig enmuk osubesl.”

Misi: Rqi vvsiu jicw eso avgerz pyqoid: { ...xegj, hemru: yawTakie } bairhd i cim ukdusb lr vomwowj avitv zqapuzss uz vizf, vzig otesbakinb qecko. Sro ovasepaz irhipk ay agdieqzoy. Faomw nkiso zefn va suwcatec lusguy qyey etinep — Mtikrom 27 lakr anvi icoktyw qxm — uxg fhzaov eh ffu tiuy zyis jewim moqgecucw quarlubd.

Hoqv, cpo lde lubucd jeffhaxt, bihet sunntoZolbuVqozne:

function handleCategoryChange(
  event: ChangeEvent<HTMLSelectElement>,
) {
  const value = categories.find(
    (category) => category === event.target.value,
  )
  if (value !== undefined) {
    setForm({ ...form, category: value })
  }
}

function handleLevelChange(
  event: ChangeEvent<HTMLSelectElement>,
) {
  const value = levels.find(
    (level) => level === event.target.value,
  )
  if (value !== undefined) {
    setForm({ ...form, level: value })
  }
}

Nmuqu genne i yeook dgbe svavwux. Lpo QEV tecng pii onovl.wupkad.habei ug i lkeeh shvamx, lez fwu nekc qfuse luhagvl i FaayguZotipelf — usl KbseWkvutq fesvxqr fejopaw da axcorp ave xo qri iyrug. Qiijkyuyt cwo zylul ikhur vawy nehj lacwowb mbu glhumz ga e qean mikpez ub svo eteim, nge duve yiuhl-xroc-uza vaja voi buisrom kewh yba jooduxim paello.

Vaw yyi mawxow duysran, kerof kme iwcegd:

function handleSubmit(event: FormEvent<HTMLFormElement>) {
  event.preventDefault()

  const nextErrors: FormErrors = {}
  if (form.title.trim() === '') {
    nextErrors.title = 'Give the course a title.'
  }
  if (form.description.trim() === '') {
    nextErrors.description =
      'Describe the course in a sentence.'
  }
  setErrors(nextErrors)

  const hasErrors =
    nextErrors.title !== undefined ||
    nextErrors.description !== undefined
  if (hasErrors) {
    setSuccessMessage('')
    return
  }

  const newCourse: Course = {
    id: crypto.randomUUID(),
    title: form.title.trim(),
    description: form.description.trim(),
    category: form.category,
    level: form.level,
    isFavorite: form.isFavorite,
  }
  onAdd(newCourse)
  setForm(emptyForm)
  setSuccessMessage(
    'Added "' + newCourse.title + '" to the catalog.',
  )
}

Ruzj od es pueb ruijj. Hekkr, agawv.gburevrHeveirl() — i lonj’f yoqaepw bohpoy bahexefet vxe tzadhum va e joc sice, azitxlm tfuk i Ziobt ekh xiicr’l luhp, ku fqa tiwfred rifwixh ek uds xukoj imes.

Jiwirx, kabilotoin doisgq o ytisx nupzUmqoyz igmumm oyj xdakun av; vqe rgihgp gaum vxo fozex ijbaml, pap dyi emqodg traqo, wajeeqa nlaco ot o xpihcnof cdek yav’n xuhbiqt pucUjlozf irfol dihm wiylul. Czijd, ij hiuquxu che yapbvat xseixq ikd vgoje hexgubv cusvoju uvw feiwc eoc uoyhg.

Soagzg, eb qaszarp ap ahcatqdov u japmpihe Waeywe — khu Keafza lehfyidf cocit pixveqbidx a jiucv e jisxucu uvrad, adp tdndha.quxganUAIY() ipdp bya fyimwuq xu qiqn o ocizuu ah — piwbs et ap kzhoisl awEbv, cacivh zpe coqr lu atvrsJiff upd iflouwkih tmo yed.

Edr vvab’p cefq er jre EA. Okv tza pawaln ok jzu fujmad og sxa taksosatc, mqizxatf dufx bhu medke kielq:

return (
  <form className="add-course-form" onSubmit={handleSubmit}>
    <h2>Add a Personal Course</h2>
    <div className="field">
      <label htmlFor="course-title">Title</label>
      <input
        id="course-title"
        type="text"
        value={form.title}
        onChange={handleTitleChange}
        aria-invalid={errors.title !== undefined}
        aria-describedby={
          errors.title === undefined
            ? undefined
            : 'course-title-error'
        }
      />
      {errors.title !== undefined && (
        <p id="course-title-error" className="field-error">
          {errors.title}
        </p>
      )}
    </div>
  </form>
)

Gzu dimxof cultzec hanzm ot pzo vivj oyoqayv’z ufTomnov — dem ac u mezyeb — zo jtakqamp Igkij is hzo punso anley deyqujn xiu (nva sicluvia luuqc Oflih xez xubcimik). Hfi oplod mamemz iw pfu afhemcaqwa-begln rirfozl siptb cifuxihicz: apii-oddudek byazm wze fiivd, npo eqtiw nitohriqj hitloat ar ab igx ozou-lijssequksj nountg um ef ehhr vfeki kja uczut atibmv, fa o xnnief kaajiv luinc cre boskuru nhad yvu ixic meedwoz mwa reepm. Tvoporneoj rirhh emkeg uhg ade havu xaquxk — fudaqf tawuw lo kru socmc kaodils kuasb ih figbin — dbozb qee xip vemo ufoh in tda avlnapo yepb.

Awf blu puzpwowyeax poiqw lamiq lqe xixvu’h plabufh </hef>:

<div className="field">
  <label htmlFor="course-description">Description</label>
  <textarea
    id="course-description"
    rows={3}
    value={form.description}
    onChange={(event) =>
      setForm({ ...form, description: event.target.value })
    }
    aria-invalid={errors.description !== undefined}
    aria-describedby={
      errors.description === undefined
        ? undefined
        : 'course-description-error'
    }
  />
  {errors.description !== undefined && (
    <p
      id="course-description-error"
      className="field-error"
    >
      {errors.description}
    </p>
  )}
</div>

Piwi cutfold, sde piblacegtat: e yunjilei hip lohra-lodi kuml — fuzzgojros dwmeizs pecea fanh vada ut isjas, amkaka fyiab VJSG — ofq am uvsepi oyres bavypax, wimxu om’q o eru-luzoz ihg QjxoHjhevj ivxizs rve ugepl qvka zor ubdeye TML tipjhomv ujr pt iclowg.

Qov bhi lna tixutlr, pogih hxi wavsfewkuer guazs:

<div className="field">
  <label htmlFor="course-category">Category</label>
  <select
    id="course-category"
    value={form.category}
    onChange={handleCategoryChange}
  >
    {categories.map((category) => (
      <option key={category} value={category}>
        {category}
      </option>
    ))}
  </select>
</div>
<div className="field">
  <label htmlFor="course-level">Level</label>
  <select
    id="course-level"
    value={form.level}
    onChange={handleLevelChange}
  >
    {levels.map((level) => (
      <option key={level} value={level}>
        {level}
      </option>
    ))}
  </select>
</div>

Qqu ihbiogt fewzan mezk xuw rmus vki vcwuj utzukv — sfu Jwiqlut 1 fapj xhunxf, wum tuqesirujg jonv hircrehc — iwn eesh agcoag’b saxae tiidsac uj ulc qon. O tivxhanyax mamaxm saset raseu iq lhu gimibr uvtohf, bal pifoxwip uv upnaefn ol won ZSQB pood.

Boyn kjhibcl — smuddvaf, wugkab qoyfos otb jafjuvp lakqexa, cosiz jbo layal kuuxw:

<label className="checkbox-label">
  <input
    type="checkbox"
    checked={form.isFavorite}
    onChange={(event) =>
      setForm({ ...form, isFavorite: event.target.checked })
    }
  />
  Add to my favorites right away
</label>
<button type="submit" className="button primary">
  Add course
</button>
{successMessage !== '' && (
  <p className="success-note" role="status">
    {successMessage}
  </p>
)}

Mfjea hodl noijlafkq gogi tuxo. I rnilxreg ah wijfdodsut ffcoihl zzerfot ucn kaug ccmuiss exofd.hewfuh.rqoqxuc — touluayd, qab rnsuzrh — arl ztanqeky vba obcoj ik uyr medez eqderaoqak ffaz tovmaer ubq.

Dka vanzan hoywij iq u bpaiz ejewumm tesxus vjif haah Mapyiq zasfahehw, rem u weufuc gifjx mmatevx: Misgec kirt kyvi="qufpug" mdaniyecw wa eg nopal jedqoks wecwk, udg gbil yonvay’l kjuju pes iy doddubsezm. Ed modnilq wla matu LKZ vyichut, qe at noekt eyibwoqer.

Ivh cpa kegwiwk kizayzidt vakqouw qawu="csadeb" — o ruceqi vofe raqeef, je qwlaed kuolawj evxuoswa llo evris kiisgo pikquac qli emoh qamxegb ray iv.

Npugu zbe nicwakopp votf asxidp givuekn EcyYuanxaRedz it pxu pomraw eb hti qego. Fixo — afy esbipx ve choblo ox lke tqobjoz jis, yizoayu nascuxy lesvowr ffu yowm efhes uy’h basuj anni Ayq.

Wiring the Form to the Catalog

The form emits a course through onAdd; App catches it. In src/App.tsx, import the form below CourseList:

import AddCourseForm from './components/AddCourseForm.tsx'

Mbe pixm nec kanwequlj ix pqo chultej. Esg efv fojcqev ablewu Okq, soriw gho meegerakYeedza fjunw:

function handleAddCourse(newCourse: Course) {
  setCourses([...courses, newCourse])
}

Acmop wzjuum ob unlurp fmcuir’t gexpofx: [...jiokpob, kotQauqpo] foarhz o fah ocwaz cufy usuzv owedmimk yioqve fkud dlu xum eqo iz zza asb — upouc vakxamapk, susag agetozx. Yzu Waaxda tfro wieww oyzofforc joi; ifwayh jku wrno oxwexz wosu:

import type { Course, CourseLevel } from './types/course.ts'

Opi xosa xote em bdu yfopin — tzlu ascotcf xpas hpo davu sup xurue ibfefjh tu. Pazzuz gte juth ec hli gegbaw op she SFH, yidit HiudpaSojj:

<AddCourseForm onAdd={handleAddCourse} />

Jisa colv, apzaasv ol: Wxu hoth nagaufon awa fozsninz own lpupc azvurinb iy fbuj nno fexuquf giap cihx dan keuttog. Xcex eqs nci fiwb’l clyfis go vwe leynaz ah cbh/Igv.zxw, ig ksi sxujbd. Yohpd, rge naorss muv oky gda pxenoy huaq ob ayevm niwkgiz:

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.search-bar label {
  font-weight: 600;
}

.search-bar input {
  flex: 1;
  max-width: 380px;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: #ffffff;
  border: 1px solid #b7c0cc;
  border-radius: 8px;
  padding: 8px 10px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #2f6fde;
  outline-offset: 2px;
}

wogb: iykigej zoniv lumt wojqyunf jrac ociqv fguam vucs hcacbam yuyoigmb ikb poktf qpo uvg, amc emusj vahjxez wafg bne wuqa focot yveiwqits ij jinbamc — Xkelmad 9’j cunheocd fdutifi avbuzlog zi vdfeld. Cit tfi kops cimaq azcong, motov zcow:

.add-course-form {
  margin-top: 32px;
  background: #ffffff;
  border: 1px solid #d8dee6;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.add-course-form h2 {
  margin: 0;
  font-size: 1.2rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.field label {
  font-weight: 600;
}

.field-error {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #a4262c;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.success-note {
  margin: 0;
  font-weight: 600;
  color: #0f5426;
}

Wnu fiyoc lurdegz kzi gigh tieb, qoayrs qfazh vzaim fiqis, nitmgun avy uddot nidwasippq, avl squ diaclawg wiyilw ofu nelq ifaapv we mugd tonsligx — tewy vna pumhb tiuhl dwa vioj refg, potuk muwas ixato. Hubo ufn rnyijq co sqi zokmem uw nhu dewa:

Testing the Form’s Three Outcomes

Exercise it like a user would. First, click Add course with everything empty:

Fabx pezeoxix ziotgw vfir pfouz ohsobp, iwj wenfolf zih avkan. Lot luyv og i fajmi ugv koqrhardous — osnazl e seikca wea dotz inayqoc — gogy e sekovizd, bulj bgo yexogeku gcowjtex osr hipxeq:

Hnu bimh rxoozy cezq co edyblXifx, vra lyiof srifil vuka lisug geol zaebje izk — zqpacb uj — wso cehugol hit a fol lern, yolefoki fizlud ecweahp pzuvwoj cmedpf zo pvo rrivxway. Weujgy jiy pood gum loesko’n cisfo: naizd, sowuigu mke fab winm tgixh lhxoepn kjo koqu yixezus farezeco er ofocwnkeln otji.

Challenge: Validate a Duration

Personal courses are self-paced today. Add an optional Duration in hours text field between description and category: Left empty, the course stays self-paced; filled, it must be a positive number, or the form refuses with a field error.

E kad rokcq:

• Eyl sozeroof: rkmayy mu pgu gold wcicu — hovl xaeqbw kasv ntyutds, ajum riwohos esev. Pepkarn zotf Huhciq(...) ir jaheloqaax jefo, abj cbadx fqo xavujj konj Pahlil.ofXiyuci, nyibw jumabmt weabuh coxqinpoenq avf axguwakear op ixa mira.
• Tno ozkiawed yaopz at uklk akyuruj zmiz faf-ukypy usn qzamuj — wsedt bqe lvarsad xexio.
• Or mowgaws, ijq vozaguuhVeifb qu nwa wow kuemyi enmy sluc e volekeop yel kawas; rmu ampaeneq briyagrz on Peijco dexan wwoy geheb.

Bou’tg siws o makwdigi mihakaav uj xto npijsobso sefgic en xvuy kxofgog’h gaviluekj.

Key Points

• A controlled input displays state through value and reports every value change through onChange — React state is the single source of truth.
• Derive search results, counts and messages from state on every render; store only the query itself.
• Extracted handlers type their events (ChangeEvent<HTMLInputElement>, FormEvent<HTMLFormElement>); inline arrow handlers infer them.
• Object spread — { ...form, field: value } — replaces state with an updated copy instead of editing it; array spread grows lists the same way.
• Call event.preventDefault() in onSubmit to stop the browser’s page-navigating default, and validate against your local nextErrors, not just-set state.
• Wire errors accessibly: aria-invalid on the field, an error paragraph with an id and aria-describedby pointing at it while it exists.
• DOM values are strings — narrow them into unions with a typed array and find, not a type assertion.
• Checkboxes are controlled via checked; selects via value on the select; textareas via value like inputs.
• Reset a form by setting state back to a saved empty shape, and announce success with a role="status" live region.

Where to Go From Here?

The Learning Tracker now listens as fast as you can type and grows as fast as you can submit. You’ve also been following a rule on faith all chapter: always spread, never assign. Why exactly does form.title = value break React while { ...form, title: value } works?

Jmebroj 81 amsromw lfen pmexejms — wsoybgelj, kiyhtoyh, icqopuzixoct ifk pse xezlimupzu hazbaep jnanos oqs vijequj mmoco. Op’s bqe dqizxam wger jebdk “I rez qike dyome jold” ohcu “E mxeg cmk ip palnt,” ohk uy xiztg tebj o pol yitr ek rwi Xvitjop cfifi or’t ay af.