- \n {movies.map((m) => (\n
- {m.year ? `${m.title} (${m.year})` : m.title} \n ))}\n
Every useful app takes input. For the Watchlist that means a form: type a title, optionally a year, press Enter or click Add, and the movie appears in the list. Forms are where state and events meet, and where most beginner bugs live: inputs that won’t accept typing, pages that reload on submit, numbers that concatenate like strings. Each one has a clear cause.
\nIn plain HTML the input owns its value; you read it when you need it. In React the usual approach flips that: state owns the value, and the input displays it.
\nimport { useState } from 'react';\n\nexport default function AddMovieForm() {\n const [title, setTitle] = useState('');\n\n return (\n <form>\n <label htmlFor=\"title\">Title</label>\n <input\n id=\"title\"\n value={title}\n onChange={(e) => setTitle(e.target.value)}\n />\n <p>{title.length}/80 characters</p>\n </form>\n );\n}This is a controlled input. Every keystroke fires onChange, the handler stores the new text in state, React re-renders, and the input shows the state. It sounds roundabout, but now the current text is an ordinary variable. You can show a character count, validate as the user types, disable a button, or clear the field by setting state to ''.
Note onChange in React fires on every keystroke, like the DOM’s input event, not only when the field loses focus.
Handle submission on the form, not on the button’s click:
\nexport default function AddMovieForm({ onAdd }) {\n const [title, setTitle] = useState('');\n const trimmed = title.trim();\n\n function handleSubmit(e) {\n e.preventDefault();\n if (!trimmed) return;\n onAdd(trimmed);\n setTitle('');\n }\n\n return (\n <form onSubmit={handleSubmit}>\n <label htmlFor=\"title\">Title</label>\n <input id=\"title\" value={title} onChange={(e) => setTitle(e.target.value)} />\n <button type=\"submit\" disabled={!trimmed}>Add</button>\n </form>\n );\n}onSubmit on the form means pressing Enter in the input works, the button works, and assistive technology understands the form, all without extra code. e.preventDefault() stops the browser’s default, which is to send the form to a URL and reload the page. The component reports the new title through onAdd and clears the field by resetting state.
Validation comes from state too. trimmed is derived on every render, so the button is disabled exactly while the title is blank, including a title of only spaces. The if (!trimmed) return; inside the handler is a second guard in case the form is submitted another way.
Every input type follows the same pattern with small differences:
\n// Numbers arrive as strings. Keep the string in state, convert on use.\n<input type=\"number\" value={year} onChange={(e) => setYear(e.target.value)} />\nconst yearNumber = year === '' ? null : Number(year);\n\n// Checkboxes use checked, not value.\n<input type=\"checkbox\" checked={watched} onChange={(e) => setWatched(e.target.checked)} />\n\n// A select is controlled through value on the <select>.\n<select value={genre} onChange={(e) => setGenre(e.target.value)}>\n <option value=\"drama\">Drama</option>\n <option value=\"sci-fi\">Sci-fi</option>\n</select>The number case catches everyone once: e.target.value is always a string, even for type="number", so year + 1 gives “20161”. Keeping the raw string in state also means an empty field stays empty instead of turning into 0.
Controlled inputs are best when you react to every keystroke. Many forms only matter at the moment of submission, and React 19 added first-class support for those: pass a function to the form’s action prop.
function QuickAdd({ onAdd }) {\n function addAction(formData) {\n onAdd(formData.get('title').trim());\n }\n\n return (\n <form action={addAction}>\n <input name=\"title\" required />\n <button type=\"submit\">Add</button>\n </form>\n );\n}React prevents the page reload for you, calls your function with a FormData object built from the fields’ name attributes, and resets the form’s uncontrolled fields when the action finishes. The fields aren’t controlled at all.
When you need a result from the submission, such as an error message, or a pending state while async work runs, add useActionState:
import { useActionState } from 'react';\n\nfunction QuickAdd({ onAdd }) {\n const [error, formAction, isPending] = useActionState(async (prevError, formData) => {\n const title = formData.get('title').trim();\n if (!title) return 'Title is required';\n await onAdd(title); // could be a request to a server\n return null;\n }, null);\n\n return (\n <form action={formAction}>\n <input name=\"title\" aria-invalid={error ? true : undefined} />\n <button type=\"submit\" disabled={isPending}>{isPending ? 'Adding…' : 'Add'}</button>\n {error && <p role=\"alert\">{error}</p>}\n </form>\n );\n}The action receives the previous state and the form data and returns the next state. isPending is true while it runs. A child component inside the form can also read the pending status with useFormStatus from react-dom.
Which should you use? A sensible default: controlled inputs when the UI reacts as the user types (counts, live validation, dependent fields); actions when the work happens on submit, especially if it’s async. The Watchlist’s add form disables its button while the title is blank, so it uses a controlled input, and that’s what you’ll build in the exercise.
\n\nNext, you’ll connect this form to the list. The form and the list are siblings, so the movies have to live in their common parent. That’s lifting state up.
\n","toc":[{"id":"sec-1","text":"A controlled input","level":2},{"id":"sec-2","text":"Submitting","level":2},{"id":"sec-3","text":"Other kinds of input","level":2},{"id":"sec-4","text":"React 19: form actions","level":2}],"takeaways":["A controlled input gets itsvalue from state and reports every keystroke through onChange, so state is the single source of truth.","Handle onSubmit on the <form> and call e.preventDefault(); you get Enter-to-submit and accessible behaviour for free.","Validate from state while rendering, for example by disabling the button when the trimmed title is empty.","Input values are always strings; convert numbers yourself and use checked for checkboxes.","React 19 form actions pass FormData to a function and reset the form; useActionState adds a result and a pending flag."],"further":[{"title":"Reacting to Input with State","url":"https://react.dev/learn/reacting-to-input-with-state"},{"title":" reference (controlled inputs)","url":"https://react.dev/reference/react-dom/components/input"},{"title":"\n );\n}\n\nlet nextId = 1; // in a real app: crypto.randomUUID()\n\nexport default function App() {\n const [movies, setMovies] = useState([]);\n\n function addMovie(title, year) {\n setMovies([...movies, { id: nextId++, title, year }]);\n }\n\n return (\n Build AddMovieForm so it adds movies to the list. Keep the ids title and year on the inputs.
value + onChange).onAdd(title, year) with the trimmed title and the year as a number, or null when the year field is empty. Don’t let the page reload.disabled while the trimmed title is empty.App already stores the movies and renders them as “Title (Year)”, or just “Title” when there’s no year.
'': const [title, setTitle] = useState('') and the same for year.","Put onSubmit={handleSubmit} on the <form> and start the handler with e.preventDefault().","Derive const trimmed = title.trim(); and use it for both disabled={!trimmed} and the value you pass to onAdd. Convert the year with year === '' ? null : Number(year)."],"explanation":"With controlled inputs, the form’s current values are ordinary state, which is what makes the rest easy. disabled={!trimmed} is recalculated on every keystroke, clearing the form is setTitle('') and setYear(''), and the handler reads the values straight from state. e.preventDefault() stops the browser’s full-page submit, and converting the year in the handler keeps the raw string in state so an empty field stays empty instead of becoming 0.
Playground note: the checks submit the form by firing its submit event directly.