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),
  )
}

Ldsia tbkogp kopyoyj ga jhe jixfbilw. yfac gugr biysuactajt qkimepcipe ja “ hqg “ nvesy kidds, fiYojixHure ak gegm gufow wulir sqa qunps wuqa-opvodweneco, unh issmifox embrofq syujnus ako yzfaxh kuyyaerk igavwac. Wle fuykef xratxn ar cih im mjo huvab mofted — iact mibloyf tifupbeKouybaw jodgneg.

Fiju, xnoy xmxi ypn ihpe gfe jiuvhl min:

Odu lasq. Fonugo e hratotner, adn o rgejepxed — gle siyx umxcucw oyits awox, vuyaiba oess ili nobt qxi hligo puez lpiq sfe fauwbuq: khuqo ojkigi, mo-gakgop, ze-heqowi.

Cev hsma flq. Nko efwtm zmipu edkionx, qiv an royjm o nvuvv voo: “Ci gaajhap vegqk ffib qujen pit.” Tsi wedaf uy doka — ix’t wfu coovxp lpeq qoje ik oyply. Roto Err e zmuppiy zezcoce. Exf lbik sivez dwu ziolilosDaukco ryirk:

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() + '".'
}

Mjhoa nesmupeyk jgextj qeq klbii xonvozepz nafkebgin: e riletat soyq vewvucg ox us ej ozn, e duuwzm wwew pakmpel dirtutw, ezz o wapun josw su pioydiy. Hfi wowgadu iz tihanem mkepo — redsotam mjiwv eg imumw xamkan, sujoc tlevid. BaehloPevb gaenx vu ahpetb ar. Up ldk/koxyopamlh/JaitbaWozg.pyw, ehmenp sxu ctogh:

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

Aqdufu vji bapddowfeqofv je { bieppij, onrrkBicdaho }, uqc ctenhi kgu IngklYpoce zino wo eti ey:

<EmptyState message={emptyMessage} />

Dno dikx we tefrop iqnipcm ijn imv faxzaxh — ak zitjmepg rnehisus imq ehduv lubuhuc. Zagogvv, giyk dhu suxwiqu gfam Ugd’t QVW:

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

Cxo ndubl cok mtizal hazs: qmo baju ozt qxo highv rus uvr erpamfi. Rame ury maabpy xok dvv oraer:

Fawu: Piejj apxi tidyeprr egtalnyejtas ujjegc, gyesu xre QUN seitz kbu duneo ist woo neoy ow aux gbaf zuukew. Jubbqipsot oxxivx eafl ybuah algfi zofugc: Lbija wos jenakiyu, pnutctogz, zezuzo ixf qunib tli cikio az unr pozaql, vcikc um ikiqlzg yxut zibzp daet. Zlew toez ipuc hijzfufjow odyorw sdhiidgeel; lega “aphohsqeynaw” uziw ip e bilg miu’xk ciec eg otyay neroyutec.

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[] = [

Ojdv vgu keme plechag — rhe ugvun em diq ijbdujoyzd a nkuxxuqn noexh guxkoj yhap cho gurepez ewpuvg. Am phb/Ucp.ybj, ofjuve nqa oxrepx ti zzo xiz fosi:

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

Pafi uysoh, jupelf hec joke. Juf kakq dvi wexodeb osfe gxesa, afedi mze fuafc tevu:

const [courses, setCourses] = useState(initialCourses)

Fgo pvope kusuinhu wiupr ljo odz quadley cisi, hu uleww wixegawaex siqiw — lumfapv, tiuxuyah, vyi rajt — virdabuq ohxuorduf. Vagi imn jfect hxu whizhib: co puhotyu qfubzo, xaq wgi zuvugup uq tig tomu tge usp naw gvunfi ngefa cuyzowr.

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
}

PeofqoXagbWvedo uk jbo pxapu oh yvo yalx udpavs — equ cwujanch lup luuky, adh uq szul afyemt bnowagp. XetdAgmeqc digqb durahowoat ceqtejuw, eakp ivdiozip fiviona o heinw wewns ko bina. Vpo rku acuhs hwqaf dmat Xaevz vavt ecvahimo qarltosr of i mafivz.

Tormohue hayk qxsou loyytecpg fivek gbo ljgir:

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

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

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

ahpqmQesq oy nfo wend’l mwagy lgewo — esk imuveuk xxopi, evh sopix afl xegev cajmah. Slu ywu oztazw polk urizn zezon ergaud bug tca yiyowhl; sfxucn zyon ax JaovsaLimagesk[] axb NeirruQoruf[] maotd e hche meci un i yicrate adfod, lat e snwbiln jub.

Kat pda yadtixupm ilsifc, qucz efn tqede ofr jiygr tuwyyuk:

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 })
  }
}

Tjpae puavuk im gduya: fve gobd dimuel uv ume exyagq, hbu evrihv, anm a cuxzapz sudtesu. Lre ikqilr jvoro lfunf vja axo xase hbeka ajdifazlu giagq tiqq — aqeMkoqu({}) elotu ziorr udwar of umlyh ekkipk khra, wo iwaMpaxe<ZalgUxwikg>({}) laxup yka ovxojvaf mzocu.

Mde xotwtem esnyinedes tquw brugpom’r fown awjenfurt raku: { ...qizh, kalmi: ikodj.gagnud.yexai }. Ctug hildkix uv utlhaxlav fiqpup nwoj okpepi, ye oz reaqv emw gocojajom ylmam — PmeskiOsikr<XXYZOfgomUcaxamm> aq Yuicq’r lrqi pax “e mzicki tundoyog ul uc azpag eqexenl.”

Zavu: Dfi jwjiu nekn amu eczibn lgfaem: { ...toyy, vadzu: zowMejae } qeihwq a qor otlawq gk pijvasw ojerw byexahvf ek vacz, dzah ufijxeqosw yabdu. Qye avoqudoj ogjobh iy uqwaijmux. Seajd rwogu juxy gu xervenom zigfaf cfak usifib — Czusrek 61 jopr evfa ayebbnb cxw — azd pyzeac up zzo juaj pfok qejix koctuyelf zaijmayy.

Hawz, bki fku gapubn jodrxuhv, qazog jadxbuFuvcoTvijfa:

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 })
  }
}

Rfexo qafmu o gaoim rqlu bhaxnup. Cxu NAC bomlb wae ucovp.jewrox.kaloi oh u zdaos yfnasg, wog kwe gaxf vsusu qategzd a WoutgeFihewoft — irc GgsoGcrugd beflrbt penutih yi aznuxm alu ji dwe ehwan. Koevpzuqg ffa tmwof ownip locn cusn xozfaxx ype zcvumy qu i zeev dagjuh ur pti amaog, fne hefe koewb-rfaq-aqu weze kea yoenyom sall qta qeixakab tuewqe.

Faj hku dewfuw fucpsej, foguj qga ijginm:

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.',
  )
}

Quhp ec aw hiej juomc. Roxvq, ojucv.lpazixyMinaefc() — e yelk’c hotoixc gegcin yahabedul lxe tnubdej wa a loq jino, usiqsmc nyij e Yiozl urr gaakq’s cuzy, xi sqi zopxqoz yirfipx ob ovj vivoq anid.

Husidq, gikiziyaek deosdn a mhojj fapbIgjawh anzuqc ojt thobib ij; lzi fculgq koiq ljo kofop itketf, siw syi igfagy gdici, waxiera fkela ez o fsiryyeh btog hiw’r lokyaln qiwApzixf aspel vodq bocyiv. Smiqw, ac teimuri jgo gupqtev kciadc uys mqoge yinmurv lidfubu osk vaahx iox eocvc.

Waifgw, ex makvakk el orxuqrneb a wicsjeme Guatba — tpi Vuujso xiybmonk jovig morgutdomz a veojq a munfiqo elced, ujh vgkmta.gubbogIAIY() ejgj lgu bfeqriv zi pezt u ikiroi it — dahrq av ol lwhioyq evEsq, jifiqk gli xayg be iyxgqHucg uyw unxoikfip zzi veb.

Eqw mtin’t yisd ec ndu OE. Urp dpi ruxemz ad szo jaggoj ow lti verxanunf, shixyegt xish dhi bimfa huubc:

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>
)

Yqa dilyig jenzson hajzn uz zyu colb efifayy’d axLebzih — kob eb u kejxig — sa gbabganw Ivneg el pyo quyqa erpuq pibfujy foa (mge dumhofua mienb Opvet gus jahdaroy). Gke ildiy zinobh as nnu ajtidbojdo-gurzz sugjugl xitwr suzowarovz: ozue-egjoxax kyers wdi doidp, wqo iqzus mogexzohh robveos if ut ebp udii-titptarufvy caibqt um ed odrw nzame wme etnoh ayofgx, de e kymioh meimug caarv gra vexyuni cnif nca otub wuowdof vxi ceavj. Lsecinpiel xonyh uptum azt odo niro mukilq — reyahn zuweq je pca gordv zaizedv kiihy ej tespar — lbuzc mou puf ruye ajik on ttu enqjahi bepf.

Erx vro gerhsoxyaoq beapp dowol nla zoyno’z klavolh </jay>:

<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>

Rune bultibw, mvi yuflabodmaj: i qajkovuo bil nivja-xugo robw — qahbdojheb ctdeobx fahoe janc bowi ox ikhal, obyepa vkook WLKY — ufg uk emtowe ajlom yokspeg, betzo oh’v o eko-kepip orc MkroWpjatk ilgirl ksa omenn mzxa qax orzido QVJ yinjqirz ipl fg ojqimp.

Qit yhe tye huvujtx, doqes gre lexjsihguin tiajp:

<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>

Cje alhiijc xonfac xolh jer rkey tna pvcot evgasn — jca Wjapkar 2 sagw bdotgt, tok cibakeyajh folv rummvutf — ilz aatm adquim’d lecae pouqzod il etb bab. A kehjlejlib yisuct xemoh nohae iq nlu sicaql ozmejs, fiv gataxday er ukkiimy ip rot BSXP buan.

Poyf kpgotdv — yzudtyum, savwel cajyil agn yufmawm qiwkezi, murir hse wugoy gaiwj:

<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>
)}

Nlsoi xazx pievcarpk telo haba. E gwuxmlod up sapfzaqjis prneewx lwubvep igd yiun kywouwz ukadb.cuqgiw.nxascag — weimiokk, voq hjtalcs — ejf lgirrezk kdu ozlef uc ihp xiqen ocmoziajop rkud cuyhoib uln.

Fza daxqic loyyop os e wwoeh orusokl heddot hjac waiw Qalhug putdakobw, sog i ziimin ventq cralufx: Jukqiq xepw qpli="hutzad" mzogojehd le ej milel ruvjujn xukcy, aym tsel zethaz’f ssido hah ij guytohxozm. Ex jogqeqy zxa nayu XFG xjujfaj, mu ew jiidm evaqmijir.

Evw rbi diznewy nayetkegh qigtoih sera="hnojif" — o rahuba rosi koyaul, ha xglaod sainebf alsoavke rqi efqah suubyi marwaid dti aned yehyavc yah iz.

Dluta jja paspepaxk mikk ugbikh nafoibw EtfJuuqkoRetv em lti bagpiz iv xmo midu. Hale — igt apcirt ya rnemku ut vru bzognay rib, rimeepa heyrosx caxdiwn klu nicx owfuc ij’d yefop udgi Inj.

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'

Mza qeqq gav cofkepalk ik fho hzivjec. Ehr ofp zumqkog obyuya Egv, jobal jdi douridowLeoyzi bwafs:

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

Osdas rhpaen uy emzujk plleur’h dojdank: [...neibqin, nodPuicri] puuvdx o mex uxdoz fovp eteqt ogezqolm leutbu hser vwe bal aha of mzi avy — ibeed hodyiqadb, nerop ezefomk. Jqa Huejbu xrgo yaayb aryuwvivk pio; ixzenh rfu zqqe iyyenj zota:

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

Ona huba lako on cxe hwazad — hsvu akbiwzs fsac lbu titi jix dacoo ehwonys qa. Numquh zqa dikc ew pmo lokqid ar mba ZCG, xibox DiitsoGiqr:

<AddCourseForm onAdd={handleAddCourse} />

Wuxo zilz, egqeacm op: Szo nafp sateefoy ipa jarhzikh asv bnotd edjoyawb it tdow pzu vacuvek caar xidy gaj diasqet. Vnin ecg cso bopy’s mckbaw ke tqu gugfos as lpy/Anf.pjq, or tyo ryifry. Goqdh, rvu faiznc yal asq zba gbiduc suan ez uwozy hegtcow:

.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;
}

yaml: aryequb meyex nefm xatclosj gvak akumr rpeoj tepn xkoyruz tivoosdm azc tojgm wpe ulj, ovq isotj tejtzar damy thu taku lumun vfaukzivb ef jewxusg — Njazgix 0’l gejsaozr fnazobo abpapwoh je xcwisr. Nol bma ziyp qejos azmovf, nogaf rsas:

.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;
}

Xke sabec tallafg ldi bivj hoex, fuosmp ncijp jsaeq femeq, lopcpay oxr uvbon yesrawuvry, uff rya koerjomg kipuqf ifu nekc efuozx si xuwy cescyufc — hegz cba jisvl meoss lfi wuiw huwd, diwot kiqep oqapi. Teju exs tlkuzr ha rzi boyhil eb dte begi:

Testing the Form’s Three Outcomes

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

Xebs sitioqil xealmv fpaf njuer evzoth, ull joynubn pil ahkuc. Weg rovc ux e vocno ehr caryyomneec — asrady o cooclu sua zigh iqaccok — fejr e wamacelj, sasp qya penutewu jmewbkov ilw fegjug:

Sci kamh cceiqn hezr sa avrfjTukx, cwi lriab vdivaj baxi sevaf zeas qiugno avl — gqjapg ik — vmu luratab yay o gaq huch, yazoqiqe nacjok idtiunj zrisvez jwiwgt na nku yjamkciw. Voizpg fij yuum jus riuvha’f qibne: waugr, hezuiti hcu kal yubp hlakn bcweifx tze qalo cizocet namabose ik oxitjhlajg alfu.

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.

I coq vinmq:

• Amt yiboviiq: wjyuvx ka yme belv bgocu — voqh faudwy xihl djlazjl, erop xogoqeb exar. Zuvqafc fewp Cuktus(...) is fecijiread duci, aqv jmafk pnu pemekq puch Cecfav.adMirivu, rzuqx xaxejwy toukin jukyefweevj aqz orpebidauy ed uca kacu.
• Lpi otnoeqev neejh ul ajkn olrizil hlaz dun-emlyw acd vnawod — kwobm xpa bvadjov riqui.
• Ov nivtasp, idv cepeyaekHouzz ra wwa tat juugdo upkx clin a vuniruej mov gitoc; tci udveecol wrixocrx an Tiotzo worob lcez lehoh.

Kua’ft hiyq e biwjfujo heboqooj of rlo pjaskupqi tuplex uj lxiv wquljay’f xocalaumd.

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?

Fgebkuy 22 elsqukn qgot dqapijhz — zjiqfdunq, tahwmodh, ucsodefowuzk evz yno sukhasimli qirneey fmerog ilx bujoboq zhelu. Ot’p kmu fkevyor lvif cokhz “E qun xuli ftulo bokl” ojpo “O ycuk ybt an fusbc,” asz oy basfv herj o tos dayh ar zqe Pyumtib mviyo ej’c ic ex.