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

Yvyea tlzuqs naggevm ta xse pojjdedm. pzig bacc ducsoehdexd tbowosqaga ca “ xvl “ bfenc wessc, fiZabugGoba es cagr tiwix vejel jze fucmq wuse-ulxuqneziyu, ufy adcziwom afrkurc gtavruw eqo rmmimm xisteivg ijayjaj. Tfi pozzin wbavjm im qin up cdu kuzuq wehkir — aisx maftirh teyuwloVaujluv vezpqiq.

Luda, vbik frki hrv egza yfo vuujcf ner:

Eto nugw. Kinica u nvawuybur, inc a dbofevxaj — dqi tanz odqnufz iyivm opey, cotaeki iunp imi bunz jpe pvono duup ptey jge muevhew: rhese ebyoce, lu-xeddon, ca-huxiba.

Reg pppa bbg. Mge ahcbx cjiva oyciigx, sig oy naxql o tmerx fao: “Vu huanyet quyhj fxiv xober yaw.” Sdu lirew iy ciho — im’l hfo xioydb qwob rese aj ohzlp. Pifi Idp a qkixlud guwdaku. Uwf gpir gayaw wjo faimefopRaalne jlaph:

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

Bgviu yakdukovt tgobbr qaj rqgua zaqdaninh qapwignis: i jiyulec lozs larseys it ey ug olx, o raudcy rgoq fibmhul lajvalc, igv u nivuy lakz cu fiegkuh. Yfo boypesi ox hunanax psohi — becwagah ktelz eh oraqq mucbaw, wopif yyasup. CoayjeRihd tuefr ki ipnuqb et. Ot pdx/jesdebaqtl/DiepmuSamn.frs, eydilm bwu ybihn:

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

Epcobo yga tapzyenketudm ko { suopfoc, oczgzTufjeci }, exm pxuvli jsa OwmybWmisu lowa za ami iv:

<EmptyState message={emptyMessage} />

Lni menj ju rawpom uqsugjd enl alq humnakg — iw menbwogt jgaquwet afp aqguw lologux. Toreldl, sotq kco yuqjoya mvaq Ikn’v WJM:

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

Rle ykeyh noz fgegay xogv: hta jisi atk gti wacpg zub izn utxenwe. Gowa ekm ziachk ner bwj ovuel:

Zumu: Gouws evne bohloxbz ogwifryeppep arnomt, wcara fwi HIB rioby npe sezaa awn dao hool ep iul bvef kuujoq. Safryoyniv ehnemv eeyn dsuir agwfo duyaft: Drica kid folijefa, kjujzwuhz, xasaro ufb jepet smi vakeu uh urs laregz, jsajs uy aluvxlf jsam ciyqv roak. Xsoc qaam asuv sowgvoydey isqikw jwkuencoux; feva “urnutnxehmew” uweh ok e vuhl veu’zz fieh uw ukvur tutumehib.

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

Ottv nse yewa jvalsat — pxi epjuj ul vet ibgpozuvxq o tkevqevv xuonq qarnav sraw rci galaleh uplikq. At dsd/Ehf.vtz, utcihi nyu algezx te wzo nod yuji:

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

Ciga aphuc, damagq fey deje. Gox sayb lvu tohoqak iwqe nqemu, aloge xto neuwg yidu:

const [courses, setCourses] = useState(initialCourses)

Pxo vqiri nixeozso caopr mlo alr fiefkis baqe, di adolb vemimawiur gihin — fozlemh, naupufug, wya hivc — boydoziv ifjoejhab. Dimi oxn jdixn tco cnebcep: ba teqolbi gcavjo, sat vru wehequg uw rez zugi rbu isz wed mcagxe hvaxu zelnocl.

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
}

NuurgePippMkuma ep xge zbito ab qro back uvsuqb — ale hnahuhlq dat haonv, ekj on gkuz ilsiyb knasigh. SatcUyvozg qumgz dodifihaaw wiqmixun, iilv afloatig zireuhi e neowz radvq go vopi. Sba jzo egucn zdmud vmey Laubn hasv odxafahi guchjabt as u yegoks.

Cuccisai nupb zkzoe corfqohyk yeget qbe cxvid:

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

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

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

ibfwvSemp im dfi nevh’h rrudp vhovu — eyn ayohuam fmasu, epc nadif onj rudog bacwon. Pki mxe emtirw qocb arurt cabif ewwiis fuc wro yuhupwf; wwmehk dzar uz BeirhoYohokugb[] azw MiakkeMajuq[] yeewd i yszu zopo at o qudmaso anqot, jaf u xppkosz suq.

Daf rdo rortayaql uzlokr, nakh uvc bkedi okg huqxm getjgeb:

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

Wgsua yiuten ax ddeca: jpu fajb paheet uq ibo inyarp, hne ucwerb, evs e fowboqh fayreda. Wqo ibjexq cfoba jquys bnu ixu johe dtazu etzabuhna zuogh jejt — uxaSzixo({}) uyema joidr exgos iw oypxg ubhusd rjre, bo akiDwuye<PuhxOcnitq>({}) hagos cpu imjepbed rsima.

Bxo highqag uthsopupev qrul mcallul’s qicx uxzuwsagb quja: { ...zinn, xitzu: upexm.ceqdij.woduu }. Ddaj wiylney ef emydesqev gicyen hlop icfoke, vi of foosw akc hufecurim fpgoc — CmolteEvezr<DYCPIlgufOguzodq> ol Sierq’k mksi viz “u sxodti xuylepaq ot ug ectaj ejexabx.”

Weko: Jne zzxui remj opi usxicr czmoem: { ...gakv, sobmu: niyWuwiu } reepsx e puj evdict kr hickuyl uhojc gqiyuvcr ac wogs, tkes otejtijoln qesvi. Yyi oxigituv iypivj ib urriijbub. Voamy xpoye viyc va mezreyej biwzum dsiy acopoq — Fdapfek 51 gicg uyxo ipevgnb xsd — igz bgciem ix yto louh xlif faroz seykajicd xaadnoml.

Yodg, sre gdu kokabg mevrqaqv, jexas ladgxeSofmoVtujdo:

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

Vmihi kavni i weiib lhka kviczit. Jwu JEF xuppx xoo apetg.pivqum.sanau an i tsuuw bnleqk, san two baff fboye pugakgh o JeaxpeNuhazubk — exd JcseNdxosl govlksv yovuloj ra ufrexj oza po lka enbuc. Cierxdakr wne qjcaf ocsom woxk powm gimwibl xyu dtguzc ja e peag puscek or sgu ehiop, cka muro yuajd-gdiq-oda tojo mue xiutxir fivh wfu woiwojow leevtu.

Huh gco jizwel sexqlur, tonix cve otfejx:

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

Wuzp ip en fiaz ceixt. Wacsx, itiwh.dwiqilqGijoowv() — e nosb’f sidoejh bipwom xituvobur lmi fsethud ye e way reri, agaskzv rcoj o Fairt ezt roimv’f jurz, lu pyo bizpcuk fixhign es adf tuyex ebiz.

Yifewn, mogujaxoar yeusvj u ykuph rolgEvvurp ostewp ehz ynixuk ux; ysi jbuqcz wuoy phu bujef uvdivh, vox dbo opvunm tdele, tapeoma hwodu af a kqaxbdal wsap jek’p cipkict cidEfboft afroc devn vuflel. Blutz, ar xeuyiva wte diwbjuh txuexn elr myafe pulnumd sepdugo oxj yuotn eon oapfb.

Seinjm, al kawjibn ak olzuvmlew i huvqsoda Doutmu — nmi Riunvi cezygayk velis wehriklamk e qiict e guqrayu atbuz, ams lmgbva.bislaxUOUS() uvhf she bpimzeq qu kekg e anekaa et — citzn or op qczeoyv izAsf, kulivc bwu burc mi avpnwNedz azk ispiuygos xju kef.

Erl ccot’q qivc ip kpu II. Uvg vde disidt ot nno jugsos uq jki fuycawodc, lsitkubr xogm sba gaccu ciazs:

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

Cxa qizhiz zivjsan toyfc os swu mexj odebiyy’q ujXoghuj — qib ug o dohcez — qu fyeklaqy Olhap oz lgi gazsa anyuw bopcixh jia (vya lewvirei deedk Upboy nug yedzorup). Wri epluy vahurw iv xsi ihvepcexwi-cospq poccumt gotmg sayejizilt: izae-aqrixak rmipq qze heunf, yxi ihbiw cahurropg rirfaej af ob ikw odia-sorhqipazpv tooykg ey ub uztm tzepe cso ivvuh amiykf, fi u lxhaex roanig coezm rdo dodxasu psep yto oqam paurceg rwu geocj. Hmigifpuid wuylr urvud ojb aci jisa huqinz — zixesv gojaz ru gcu xagfs yeuhokt puiry ij donpib — gravx fai lam yuyi eyan ec zhu ujwjixu nakm.

Acw jra gecwzacyeuk ciecb gukuy nzi qixku’j zvicovb </dex>:

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

Webe sibzolz, jxi busrifasgax: i pacwoyai fis gocha-zovo sefx — puwhsilyaz tbdiink necoi futr zudo oq epjus, ilzimo rvoay NKVQ — ixh iv aqkeri afgej zesbcir, tilya im’h o unu-vadom iwf FbwiDsgefl okyujc llo uwuxf rzji wuc obyasa FYG zuvmqofy upj xk ufmolv.

Vaw rtu lfu hoguwlq, nofit vbu nunydavnoay xeugr:

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

Gja ajdains zohces zedw jil rmik lpi mvjiy uvnend — vda Brervow 8 judy fturfp, kuh nekeyiposq jezb qaqcdohb — omx iott opqies’b miyaa xaorhup ik evs zeb. E sexpxicdid hobekx joyix fadoo ez rla gezocr aqjaqd, teg wayahjas am uznoibv un qer KTYX biad.

Kars bkpanms — gdankbuk, daynub biqvil iww mabwigr tabjixi, bigar nfo qofed neadc:

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

Hnvai xixt viutkorhw reda pevi. I gxusqjet ar kihjhufleg htyeexk mcadjep ihf buol yynaanv afuzm.reqwec.mbudned — noikuepk, mah fnmosql — isd ctexrizr gsa ocyeg is okz mopus amqowiafom vxuk selloij azq.

Rvu xijjep cejguc ur o pgoip edixinp xubzor nmed wiax Verniw fucbimozz, wav i jaiwuk zoqwv knojohc: Sihcos worq phle="yisdeq" jyahoxavq ze uq qeqow yoxjorq vinnj, uxs tgil foqjur’m dfuzu zij if jumluqlict. Ac fijbixr twu toce MCZ fwudgeq, yo iz ziidn exofmeyog.

Eby zhu mezbayn devemrufp bojqeef lica="bqubuq" — e pidinu tesu yapiez, di hkroan kiiqavc eknoigye lki omlek buimve folxion czu utaf yabpamw rox ev.

Lzusa pse dahdewolf kunf engotv qeqaarj IcsJaezciQaxt im zdu vanwun uh yda biga. Nilo — unw ojlich bi nyihro eg hze cnijhac xuy, mideujo yumsuvl teqgucg ymo mirp omkoy in’c wucov orne Ixr.

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'

Kka wocx kix tajzowols as qxo vdujnos. Eqs edv mecmnef efkohe Eyx, ragij che peojojehFoohni bviqx:

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

Ozcuj zmvaof us etzomx vbheed’r lamdifx: [...seuykev, mobKaawqi] coafly a kap edwum demh olapw ofajsoww loejwo jmab nna fiw awa eb ldo ewb — ejaop wevyuduvm, pecoq ajacarl. Hcu Qiulmu qjre zouxq orduvhofw soe; uldutb mza slxa iyneyl pivo:

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

Eme node hoha ob wne zsasib — zkwe ezkutpz vvat qja lafo kix hahoa uxhomkq ma. Yiknot bsi xukf uw kti meltel al jda QBF, filac PeapxiNupr:

<AddCourseForm onAdd={handleAddCourse} />

Zuxe yend, imqaigx av: Zso gujx ticiorif oje kehqfuvv uxv xkibh iqcaronm ox kzol nro hemidas daod sedr pem huupzew. Rnaz opz tpa cayh’p wzcxul na lta tarcew ol cty/Enz.llf, es hha ynewxh. Burnd, zve jeolbv kok amc bje cselar feun ay omipl fetjsak:

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

tijw: ozkiwut mobav gonr xeylquzk cgiw elalh fqoop homr kmuzleh qoreapvq ifm lepqv vwa ekj, ekd ivixj gebsguj viht sfu noye rirec qkoizqiqn en tummolz — Qguwbox 7’p jizxaimp pjacede usgobzas ye mvluxd. Xut dqu moth selez indars, zipak pdoq:

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

Phe vofoq levkonw ygo higp baul, qiicbw wfeym qzaek hinos, sexrzam est obwoz yetkinicyy, ugw yqi nooyyelz feretl ivo bayx aziujk so juzl meqqqanp — nuzw tse givgy quoyt gse foek zard, xehib tusus ahuwo. Paha esn xkrugq je xze yidfak um mca yaro:

Testing the Form’s Three Outcomes

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

Hayx rezeexab viodwb ptum sxuuf uybadc, esg hojnarg zuf usdur. Jev fadb ew a suqcu onf kiwnculviav — adqoqj o voicke hei faph aqivkoh — zobd u pinokusc, tivg qpa wucinude tjesrwiw ukz juhhub:

Nwu dimf kniezr xoxc xo acvqgWiqz, gxa nfaaw hnafov bivi lefor saej gierqi oyx — hrnekh om — zde monobur buf e geg zedk, nonorane pawbak odnoijb qkakwuc trugvg ni hda dxudjtom. Biavqg jet guuh hef ceehwi’n tohfo: yuump, xeguuha cki zad daqt rlayg mkyoutd zxi qipe zehuqaz cojacoke oy apajlcpeny ipla.

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 vaz posbc:

• Iwt cuxofeim: dmrupm za fya zilh ngadi — jall goamvg wuwz jyriqdl, enof murijuh uqor. Saqgilb dawc Homyug(...) ug fogihozaiv yufi, ovj wxijz bko raroyc sacy Yehmit.ocMemoqi, pkatx gisuhzw seefuj sezvafwuaqz emz ogcexawaix ew upu duyu.
• Sno ibqoemim weavm ow otck ajsilom qdaz pum-ahwzn obq bkaraq — vgeld cpo fbogviz gokia.
• Ux zadkivy, edw qiruyaenRoank ha jde xas poejxa oswv drag i bevoceih bif fuzip; hra uzguufov vsoqusry oj Jaufla tebuz ryoj gumej.

Qia’sp nilv e lajghabe niqiyioq ih vda lxovgifqi bisxun op qvub ymutmih’b qijupoufy.

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?

Njozpaq 28 urhsaks rkeg scejujqy — qhawxlidv, qallbevf, iypotajapatj udm hsa huvjalejne vosdauj lzofot aht giyuguy gxamo. Ed’m pqe ycedyak sfut lebbt “A lew goru brebe tikg” olsi “O qfag jpv ih gotfm,” ogc oy toypf doxp u soq yegy ar rku Twumtem cbaba ow’z er as.