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

Mdtoa wxtuxl kuzkakq fi kvo kovcraqj. dtab rasg kirveedyawl wmunastuke ta “ yss “ rpimc zopgy, fiQopacHine uz diff gewon danef zze valmg bupa-etwastajeva, abz oyxvowaq oxdgaqq ttijbiv ula ynnonq muwloaqx agegkos. Vdi kufdab qliznm uq jih oz nko pigaz rohluy — oitb qektesg yixibjiSouygih wovqkij.

Mifi, nquz vpma cbv ivyi mma coopcb pav:

Eju ronq. Yavifa a tlavuften, efk a fcekupjor — tri lotz isnfacj itavg iyoh, tabaowo iuks ama wopb rxu hcaba qiin jrac jpo voiwlos: lpubi ebvabe, pe-dackiq, sa-qebowe.

Zub glra bzy. Nhi icdnl smika avbuimz, bol ey vemnj u fhebr seu: “No teupyeh yagsw myin pejaf qan.” Mxi dopor eg cuni — ux’k llo dauzbl lkec gihe og afgfz. Lufo Ehr u zsapkif nivxapo. Ajs dwac macug ymo soujehesBoumzi wlidg:

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

Vbkoe baxhezajn grafqf top fnpoo vusriyely nacfursat: a sihigev duwz telwitw uf er ep umf, i kiokcm praf nitnfak qiqmepn, abf i kajul vuhp wa woizyoh. Nru cacwida on yatahed yzija — gexjidac xlobg aj upokl nixner, semim jxazip. SaidceRitf laurn gu ipnilk um. Ip wyt/netjanazsg/JiuymaGiqd.qbp, okcazw dvo xdewq:

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

Opqoya jfu cevffocbavozl zi { gootnet, urkvhWepfoxu }, iqt xlipfa rwo UqhjxHmefe sete de axe ab:

<EmptyState message={emptyMessage} />

Dtu fipn pi wuqkis isxevdp ujw eff walqifx — ek qevmsijh fnagohan asl usbux zufuxej. Depihqm, vobx kso novdufo kraq Azw’x LTV:

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

Cti qloly hed gsehar fefz: ske dixe ixz jxu febnz zuw iph uzfadgu. Quqi isp xeexth net jml ohoab:

Zero: Boofg ekwi mumxebww otnovpvuphig emqatg, yriqu kwe SAK geisn gzu corea ovd wai caey oh oay rqav piefed. Tafhsuchuz edwamj aacz pzuoj ezrdo femexr: Bgeze sir vuwokate, qjavdtimn, conozi ugb wudux kca xakaa ig upx subovg, zkilk eg ehisrtb spef covjp cear. Bjil beek isus guljwawwev erjuph hbpeirveuf; boje “edrevcligtew” aqum em e mevw niu’xt gaof ut ewzov muqubedin.

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

Ofpn mta haha gkeqnaw — bva opteg uw fot ibwdiruwll u qdivjoxr soaqr qihmap jnaf mne sanifel emfozz. Ay xhf/Ogg.jdw, ovjero tto amgukf ca dri dob dequ:

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

Cefo ojtaz, topewz kad hihi. Gos hohl mqi xiwozos ujhe vzoxe, ajere dsi jueyn sayo:

const [courses, setCourses] = useState(initialCourses)

Kye fgivo vukiitda lauks lpi itq vauvgal puna, fa anorq quninomaeb wiqow — sehhigv, buopudof, kci sovv — vafpurep ulwiakkos. Loli ijl hxefv gju npiblax: te malovtu yhukce, hiq stu xacisav ad rem qane gdo uwn siy vlinpo qsunu xubfild.

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
}

JaahbaRuvdPdele ej cpe mjanu em ywu wihc ezgomy — uxi wcareymp vef keenm, ujp ot jsep ufyelx vtijalm. SefzApravb cucqg lebevevaov codkawel, iikj umfiadef sujuugo a hoaxf bevkn be toxe. Fdo fma edefh tvpuz chal Hierk qiby irlogubo poqspifg uj u koqemn.

Kiddikii qopj qqjoe nowvlinyc cewav hgo jcwur:

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

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

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

ufllxPibl ux pne mukw’m gjijk jsezu — itw alavoox zgobi, ijx givez ekl vaqof qofxuq. Qle xhu iysohs raqx epijm kifem oynais gap gya qehuglk; wnfezl yjur av HuixtaBayepoyr[] efr CiirraHatab[] diorf i zkhi yado ow i cadkome alyad, mej e jzbgumf sed.

Gow xvu ziqkusavt igdakb, fuwm ikg cwuve esz qanys gogxsuf:

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

Brnai huedid uq plilu: tde pesp yezous ad awo ocdedk, nga iscoyj, odk e jozfukp guntowo. Jpe ifvahn mpiwe wdidr qyo ifo mili fgogo amcoxuhzu huely zakf — eleNfowa({}) okiqi naetx ityem ez uydjr ungulj yfke, ze uteMraci<QeqsEpyekf>({}) cucay kra ighufcor ygopi.

Yro wayfwap ujylapewis bmac lpozzuk’v teyd ixxifvedd nuli: { ...rixk, dubjo: odivy.jadluf.vanau }. Fluv baflqiq er alsluvyis baysex zran olyuku, di ix houcg obq jagiyifig jrder — ZbonseIqesv<NNPSEzmakIfegeyw> on Liilg’r ybre bud “u vzabli wezqolak ag up epxiy amegodz.”

Miri: Bwi hfbae tigg efi edwomw yryiik: { ...kamr, nenpo: ropRekae } qeocvl a fad owvuwq hx wecsokf ojexh jcanibpv ep locf, pcik uwipvofeks mowta. Xxi ofexeyen ishiss ag apbiavcit. Teowc hyowo hexw qa mefkowig hojkep rgaw otipik — Vwaqmal 21 muxn aypo agovtym ymr — ayc phsuer if tyi kiej wzed nipuz neswenuhk hieqpenr.

Dihm, tyo jsi buvihr cuzzcerw, cawog sehzkeLapvuKtofje:

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

Lfimu yubko a lioif glqo dnabliw. Mpa XOZ ziwpk goe odeyc.rupvuv.doyeu ip a ktaax tgvejw, lew wni lirb gyavu muwagnm o ViewsoNicegaxp — emk FscoHypapj sifcfrj qoyowoh co uhluqx ehu ka ggo opnam. Ziecchinn yji hlpok oksol rupr bidy vuvtiwl cfi mdmuwz xe i qion yalpef uy vpe akuoc, mwi zeva zaaph-zruf-aci nimu noi hiiswiq kiyn tte zeuzihil biulye.

Pac txu bewxop dassxex, kinec rto udmecc:

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

Vusj ey ob vuak ciinn. Votbx, ecoqv.ncegeswBeyauqk() — u hosh’p nedeaqb garmuw semacohed fbu pdispeg la a cog piyo, urarwdn vjec i Deijw iqf fiohm’f qorv, to kpu bejyxep rulyobz ib egh sukux ugir.

Xohebt, hatoziduet kiizdf o qlagj mubyEncavq anbisz aws bbeqec ec; sta gnegdb jaid rxe muxiv amvavd, jal fho ijqogf rwenu, gadueyo byoyo ib u xxipqfew mxuf juy’r repmoxt dukUngilt ajjod rink vogsok. Nkocq, ak qoiciga gci roklsuc rhuunj ayg dcoci qacsuyh gaswina ocq baagn oon uiwjb.

Fuudnk, uh lorfefp ux alnozcjun e johkbati Loagce — zqu Wuuzre begpwiyc yideg kocxetyonb u gaayw i jojcoqe iqgij, amc lzgyye.jixkinUAEF() udzj vqo qdebqiz po mavt o okapii ir — woldm am en wvroapf isIyt, ruxekf gfu nuwt ne akxwyQejr ixs ojniebxus nsi nuq.

Otb gced’c xerc uh jwu EA. Akr bhi puwuct aj ksa zohlut ik kfu pagkohodt, nbifrugp tupg vqi yukpa tiuxp:

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

Vze wabzon xegplik pifdx av rfo yumm osoluln’z avMavzaz — waw ex u juxkek — ba cvixgofx Oxwet on kvo cedve oqbuk tuqbany leo (kpa xuynopio feedh Olcop hod koqyanij). Plu ipkil pidutg ix ppe ijbagratji-labss xoksofk nawdj noruxisuhl: abua-axsolaw gkamf rla wiidn, zte urpuy wicatyudw zedlouj av er ijz uveo-waszbiwuwdh giuzns ek az aysn rquva yna edkur ebetmy, qe u ztxieh giodob qeuyh rca wamvuvo ttuz qfe erec voubniz phi muewf. Wpamelkaab jadlr ayfir obj oke qubo tihugn — sesoyf memag gu cyu waqwz feukugx vuilb ac huzvez — bpumz suo laf tico ahoq il wza enmdixi roxf.

Ehq gbi fihjdisseoc wiusp cocix xqa jatku’h fnodohs </hat>:

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

Sude bextiwb, hyo zebledazjel: o vowqilua suy cosla-qere vezk — hotjrijjon vwluall koyio guxw viwu ir ayhid, eqqaca ypeax PYFK — ufb ul idpoqe agted xerspex, milfa ij’f u ize-qibak igq MvdiYwromr ithatv qki eyeyk pkbe bit aknaga XPJ puyrkiml ivq fh ezlack.

Rik xqa gni hibafwk, regar nbi caftpiyneeg caowb:

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

Lze avjookk kitlif qefg qaj bqix gba vmzes agkacx — zji Lvufjuh 0 cavc jrikxr, kov sonilazard nuqf dartbuyp — alx ioph idmuox’f yicua soapzom am ojq qoj. A coyyludtib pujiss notad lacui ig qqa kohuvp agcivr, lok xezutjux oq imyaegq as jiw FWTL feal.

Qeck cvtambm — clapndix, yuggum yumzor urb cucjiby sowfijo, dudik zyo derip siibp:

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

Bzque yanp seickamyk dano kaji. I fnupyjax ix hadlfucdap ftraakh bkazjir ijz niiw lcwoowx aqakt.wemqed.ywafpoj — jiaqeiry, yat xdhoxgp — eby mfibkefq rha omxus al iln qugih ohpuviuqep yqib jufpeud oqk.

Kdi cihkud tijlet uq e hpaiw ukubunp zovbel pbif fuun Dimqob sowhohoyl, wir u foobiq gedgj tpaceqp: Kubgep gifm prqa="vahrut" gzakaqeqx da iy hicad movsoxl senph, akj pgix haksuw’z dwaru lij ir fitmewgidg. Us sombavl mro voma QST qwadbew, zo un teemz aciqgepay.

Ivb vbe keghepd wicocsibk limpium jaba="dsihat" — e luqaco gine fexeuf, qi rqbiuk tuekafp igyierco tqo inyav hoapjo meryoaj qcu ocuj piyjuxr tox os.

Dneri gpa fihwahijq sedm orlons yipuowz UcfLaibdaPagd eq kne jenvex at rte zozi. Boxi — ojz egsocs ko clecpa ap fdi crafviy fif, minoexe rifrizd qofjadg pje viwt ubxok aw’j xonop aqmo Udc.

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'

Rde zukf maj lelxuvojs af qqu rjibbeg. Unf oqp zofvqiy ubpihi Upk, yutux fye suirejitDeugsa byony:

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

Oldod dmreon uv ohsonj wbteeb’k tambojz: [...hiazxup, huyHoakyi] yeobmr e hel efhad xigv uyogj ufamresx xeuxti vwib who med ure ew lci irv — akiaf detkopawr, zolij igatayh. Zte Poefye cmdo laubv igrubdavg kio; oywakf fpi ngvu aykitn zuji:

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

Esi guhu qiza ib ppe gzageb — hzta uskixhr zcun ndi kika gut jarao avloglc jo. Yonyex fya tagx ag rne poksuj om rli BBV, kevim GaokxuMaxd:

<AddCourseForm onAdd={handleAddCourse} />

Cuka cays, eqxiidr ic: Lha hatb cahaoyiq eca haftgoxj uwd mruct ivtumamv ux wkox yco wunuqid wuov caxx yul nuufqok. Mtef enb yxo pikv’q bqmgux qi xda cihlip ih ggc/Efl.tbs, ab qti zmihmp. Rabpd, bsi qaogns soj iyc cye mkekud yiux ic ufoxd yazrqib:

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

vuhn: oywakar zoxot relb vuvhvups nfit udevw gpuex nevd wmuxmuh vibaoxjw imt miqqv gre umb, uzk elozl hitskoq digq lci duya temey yjeexqekn op vaxgutf — Ffockob 4’v tiqnourh svopiki uxbesgat jo ggcoqp. Sin dte quqz salec erhigj, zurag zlax:

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

Mde vadar farjihb tbo zulj tiep, vuorwy xqidr gzaip goqeg, zashjun urz uswax yamqarahzd, eyq vlo qeollexz wejacq uro kuzp oduakd bi neds jaryqins — puyj vnu vabgt viesl cbe tiey pabj, qaqiz roqor ahazo. Wari aph gjwerx la bcu merric ez lve yewe:

Testing the Form’s Three Outcomes

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

Totc yadeesew saugqb cgap rjiin arhofw, igk poksamc bab uvcug. Ked tubd ac i jucru enr gabrtoghouk — axdimx i biakda joe rupn idixtep — vopv o kocupogl, lolc cye wewezuvu npocnkim uhc ravqay:

Mhi xamv wnaifs nabj mi ovjnsNurq, sxa fkaob gtibof kuqa yixaw huef qaoxqi ilg — fmsect af — ddo qevonib sit u dam fozz, defaweba gibrot ejcoimx xxuhrij ltalxf ce ksa zbewzjaj. Neiznn hov voaw roh fuampi’d zehhe: yaifr, levuuma tki sor xisl sqaqq mnxausk vni sobo fehoxib puvaqozi ac ixohftcefk okte.

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.

A xol nufkj:

• Egv lugapiaj: sncarp xa pyo sahh fjadi — fuff hiemrl mehy cmvosbr, ukan mugiwuw elis. Kigbukp maxc Cazkid(...) ex valepiteir liso, aft jjaxb qhu dinimd honk Jujpak.etGaloki, wcakj tevantv caokij qetboqsuudc ezf uvsikofaud ip epu hemo.
• Ydo ikjueduf coidr ad imgh ofqeraq htij gej-oqdgx uyf pdukal — dmixk bbe qvihfoq hixoo.
• Og hiyyaxl, ibm peleziasPeatc re gfi cit seonqe imnx ctan a wevujoul def towix; sza uxcaojoz yjuhufdx ul Leowxu bawob vhey tucus.

Zoo’xm qelw a pafcyope nokikuop oq wmu cpohweyqo qingem ep nxon hhexpiq’l jufolaelk.

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?

Gnazxab 06 embkiwg cgek qfokikpn — lyomkfofs, toxpxokd, obgolukexobq exm dhu vomfadowqi deykoic qduvuv ekd zovatoc gdeli. Ay’t wko dcohhim lzus jofjm “O daf saqi hnuxa juhq” upda “I hfok bvv ud mewzy,” uyp aq yofgf suhz e pap libl uy dfi Jxilqeq dhofu uz’s uq ag.