{"id":"l-rf-4-1","courseId":"react-fundamentals","lang":"en","kind":"lesson","summary":"Assemble the complete Watchlist from small components, with state in one owner, derived values, handlers passed down, and the list saved to localStorage.","html":"

Every piece of the Watchlist exists now, scattered across lessons: components from Section 1, props and lists from Section 2, state, forms and Effects from Section 3. This lesson puts them together into one app you’d be comfortable showing in an interview, and explains each decision so you can make the same ones in your next project.

\n

The shape of the app

\n

Here’s the final file layout in your Vite project:

\n
Text
src/\n  main.jsx\n  App.jsx               state, handlers, derived values\n  storage.js            load and save to localStorage\n  components/\n    Header.jsx          title and "N to watch"\n    AddMovieForm.jsx    controlled title input\n    FilterBar.jsx       All / To watch / Watched\n    MovieList.jsx       list or empty state\n    MovieItem.jsx       one movie: toggle and remove
\n

Only two files have logic worth testing: App.jsx, which owns the state, and storage.js. Every component in components/ receives props and returns JSX. That’s the split you want: a thin layer of state and logic at the top, and a wide layer of simple pieces underneath.

\n

Storage, isolated

\n

Start with the module that talks to the browser:

\n
src/storage.js
const KEY = 'watchlist.movies';\n\nexport function loadMovies() {\n  try {\n    const saved = JSON.parse(localStorage.getItem(KEY));\n    return Array.isArray(saved) ? saved : [];\n  } catch {\n    return [];\n  }\n}\n\nexport function saveMovies(movies) {\n  try {\n    localStorage.setItem(KEY, JSON.stringify(movies));\n  } catch {\n    // Storage full or blocked: the app still works, it just won't remember.\n  }\n}
\n

localStorage can throw (blocked in some privacy modes, full quota) and can hold anything, including data from an older version of your app. Checking Array.isArray and catching errors means a bad value gives you an empty list instead of a white screen. Components never see any of this.

\n

App: the owner

\n
src/App.jsx
import { useEffect, useState } from 'react';\nimport { loadMovies, saveMovies } from './storage.js';\nimport Header from './components/Header.jsx';\nimport AddMovieForm from './components/AddMovieForm.jsx';\nimport FilterBar from './components/FilterBar.jsx';\nimport MovieList from './components/MovieList.jsx';\n\nexport default function App() {\n  const [movies, setMovies] = useState(loadMovies);\n  const [filter, setFilter] = useState('all');\n\n  useEffect(() => {\n    saveMovies(movies);\n  }, [movies]);\n\n  const left = movies.filter((m) => !m.watched).length;\n  const visible = movies.filter((m) =>\n    filter === 'all' ? true : filter === 'watched' ? m.watched : !m.watched,\n  );\n\n  function handleAdd(title) {\n    setMovies([...movies, { id: crypto.randomUUID(), title, watched: false }]);\n  }\n\n  function handleToggle(id) {\n    setMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));\n  }\n\n  function handleRemove(id) {\n    setMovies(movies.filter((m) => m.id !== id));\n  }\n\n  return (\n    <main className=\"app\">\n      <Header left={left} total={movies.length} />\n      <AddMovieForm onAdd={handleAdd} />\n      <FilterBar value={filter} onChange={setFilter} />\n      <MovieList movies={visible} onToggle={handleToggle} onRemove={handleRemove} />\n    </main>\n  );\n}
\n

Read it top to bottom and you know the whole app. Two pieces of state. One Effect, for the one thing outside React. Two derived values. Three handlers, each one line, each a named action a user can take. Then the layout. When a bug report comes in (“removing a movie brings it back after refresh”), you know exactly which lines could be involved.

\n

The ids come from crypto.randomUUID(), created once in handleAdd and stored with the movie, exactly as the keys lesson recommended. It works on localhost and over HTTPS, which covers development and Vercel.

\n

The pieces underneath

\n

The list and item components are short because they only display props and forward events:

\n
src/components/MovieList.jsx
import MovieItem from './MovieItem.jsx';\n\nexport default function MovieList({ movies, onToggle, onRemove }) {\n  if (movies.length === 0) {\n    return <p className=\"empty\">No movies here yet.</p>;\n  }\n\n  return (\n    <ul className=\"movie-list\">\n      {movies.map((movie) => (\n        <MovieItem key={movie.id} movie={movie} onToggle={onToggle} onRemove={onRemove} />\n      ))}\n    </ul>\n  );\n}
\n
src/components/MovieItem.jsx
export default function MovieItem({ movie, onToggle, onRemove }) {\n  return (\n    <li className={movie.watched ? 'movie watched' : 'movie'}>\n      <span className=\"title\">{movie.title}</span>\n      <button aria-pressed={movie.watched} onClick={() => onToggle(movie.id)}>\n        {movie.watched ? 'Watched' : 'Mark watched'}\n      </button>\n      <button aria-label={`Remove ${movie.title}`} onClick={() => onRemove(movie.id)}>\n        Remove\n      </button>\n    </li>\n  );\n}
\n

AddMovieForm and FilterBar are the versions you built in earlier lessons, and Header now receives the two numbers it shows instead of the whole list. The Remove button gets an aria-label that names the movie, because a screen reader user tabbing through ten “Remove” buttons needs to know which one they’re on.

\n
\n Clicking Mark watched in MovieItem calls onToggle, which runs handleToggle in App. setMovies triggers a re-render; new props flow to Header and MovieList, and the save Effect writes to localStorage.\n \n MovieItem\n onToggle(id)\n \n App\n setMovies(…)\n \n Re-render\n \n Header\n \n MovieList\n \n Effect after commit\n saveMovies(movies)\n \n \n \n \n \n
One click, start to finish
\n

Why this structure holds up

\n

Look at what each component needs in order to be checked. MovieList needs an array and two functions. Give it an empty array and it must show “No movies here yet.”; give it two movies and it must render two items. MovieItem needs one movie, and clicking Remove must call onRemove with that movie’s id. None of them need localStorage, a real form or the rest of the app. That’s what “small, testable pieces” means in practice: each piece has a few inputs and a few visible outputs.

\n

When you add automated tests later (Vitest with React Testing Library is the common pairing for Vite projects), these are the tests you’ll write first. And even before you have tests, the structure pays off: when the empty state looks wrong, you open one 10-line file, not a 300-line component.

\n

When the handlers grow

\n

Three one-line handlers are easy to follow. If you add editing, reordering and undo, App fills up with update logic. That’s the moment to consider useReducer: it moves every “how movies change” rule into one pure function, moviesReducer(movies, action), that you can test without rendering anything. Don’t start there. Start with useState, and reach for a reducer when several handlers update the same state in related ways and the component gets hard to read.

\n\n\n

The Watchlist works. It doesn’t look like much yet, which is the next lesson: styling it with Tailwind CSS.

\n","toc":[{"id":"sec-1","text":"The shape of the app","level":2},{"id":"sec-2","text":"Storage, isolated","level":2},{"id":"sec-3","text":"App: the owner","level":2},{"id":"sec-4","text":"The pieces underneath","level":2},{"id":"sec-5","text":"Why this structure holds up","level":2},{"id":"sec-6","text":"When the handlers grow","level":2}],"takeaways":["The finished app keeps two pieces of real state in App, the movies and the filter, and derives everything else during render.","All changes to movies happen in a few named handlers in App, which children call through props.","Small presentational components that only receive props are easy to read, reuse and test.","Isolate browser APIs such as localStorage in a small module with error handling, so components stay simple.","Walk through every user flow by hand, including refresh, empty states and keyboard use, before calling it done."],"further":[{"title":"Thinking in React","url":"https://react.dev/learn/thinking-in-react"},{"title":"Extracting State Logic into a Reducer","url":"https://react.dev/learn/extracting-state-logic-into-a-reducer"},{"title":"Window.localStorage (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"}],"quiz":[{"q":"

You extend the finished Watchlist with a “Clear watched” button that’s disabled when nothing is watched, next to the count and the filtered list. How many useState calls does App need?

","options":[{"text":"Five, one for each of movies, filter, count, visible movies and the button’s disabled flag.","why":"The count, the visible list and the disabled flag are all calculated from movies and filter. Storing them would create copies that drift."},{"text":"One, an object holding everything.","why":"You could, but movies and filter change independently. Two separate pieces of state are simpler to update."},{"text":"Two, for movies and filter. Everything else is derived during render.","why":"Correct. The draft title lives in the form, and everything else is calculated from these two."}],"answer":2},{"q":"

A user marks a movie watched by clicking its button in MovieItem. In what order do things happen?

","options":[{"text":"MovieItem sets its own watched state, then tells App with an Effect.","why":"MovieItem has no state of its own in this design, and syncing state through an Effect is the pattern to avoid."},{"text":"MovieItem calls onToggle(id), App’s handler calls setMovies, App re-renders, and the new props flow down to the header and the list.","why":"Correct. Events flow up to the owner, the owner updates state, and the new data flows down to every component that shows it."},{"text":"App polls the DOM for checked checkboxes and updates its state.","why":"React never reads state back from the DOM. The DOM is drawn from state, not the other way around."},{"text":"MovieItem edits the movie object it received, and React notices the change.","why":"Props are read-only, and React doesn’t detect mutations. Nothing would re-render."}],"answer":1},{"q":"

Why does the lesson put loadMovies and saveMovies in a separate storage.js module?

","options":[{"text":"It keeps the browser API, its error handling and the storage key in one place, so components only deal with plain arrays.","why":"Correct. If you later switch to a server or IndexedDB, you change one small file, and App’s code stays the same."},{"text":"Because React components aren’t allowed to call localStorage.","why":"Components can call any browser API in handlers and Effects. Separating it is about clarity, not permission."},{"text":"Because localStorage only works in files that end in .js.","why":"The file extension makes no difference to browser APIs. .jsx files run the same JavaScript."}],"answer":0},{"q":"

After adding “Clear watched”, App has handlers for add, toggle, remove and clear watched, all calling setMovies with different logic. When would useReducer be worth it?

","options":[{"text":"Immediately, because useState shouldn’t be used for arrays.","why":"useState handles arrays perfectly well, as this whole app shows."},{"text":"Only when the app uses TypeScript.","why":"Reducers work the same in JavaScript and TypeScript; the language isn’t the deciding factor."},{"text":"Never, because useReducer is deprecated in React 19.","why":"useReducer is a current, fully supported Hook. React 19 deprecated nothing about it."},{"text":"When the update logic grows enough that collecting it in one pure function, outside the component, makes it easier to read and test.","why":"Correct. A reducer moves “how state changes” into one function you can test without rendering. With four short handlers, useState is still fine."}],"answer":3}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 1, title: 'Arrival', watched: true },\n { id: 2, title: 'Past Lives', watched: false },\n { id: 3, title: 'Dune: Part Two', watched: false },\n];\nlet nextId = 4; // in a real app: crypto.randomUUID()\n\nfunction 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
\n setTitle(e.target.value)} />\n \n
\n );\n}\n\nfunction FilterBar({ value, onChange }) {\n const options = [['all', 'All'], ['to-watch', 'To watch'], ['watched', 'Watched']];\n return (\n
\n {options.map(([key, label]) => (\n \n ))}\n
\n );\n}\n\nfunction MovieItem({ movie, onToggle, onRemove }) {\n return (\n
  • \n {movie.title}\n \n \n
    • \n );\n}\n\nfunction MovieList({ movies, onToggle, onRemove }) {\n if (movies.length === 0) {\n return

    No movies here yet.

    ;\n }\n return (\n \n );\n}\n\nexport default function App() {\n // Wire it up: state for movies and filter, derived values, and handlers.\n const movies = INITIAL;\n\n return (\n
    \n

    Watchlist

    \n

    0 to watch

    \n {}} />\n {}} />\n {}} onRemove={() => {}} />\n
    \n );\n}\n"},"solution":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 1, title: 'Arrival', watched: true },\n { id: 2, title: 'Past Lives', watched: false },\n { id: 3, title: 'Dune: Part Two', watched: false },\n];\nlet nextId = 4; // in a real app: crypto.randomUUID()\n\nfunction 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
    \n setTitle(e.target.value)} />\n \n
    \n );\n}\n\nfunction FilterBar({ value, onChange }) {\n const options = [['all', 'All'], ['to-watch', 'To watch'], ['watched', 'Watched']];\n return (\n
    \n {options.map(([key, label]) => (\n \n ))}\n
    \n );\n}\n\nfunction MovieItem({ movie, onToggle, onRemove }) {\n return (\n
  • \n {movie.title}\n \n \n
    • \n );\n}\n\nfunction MovieList({ movies, onToggle, onRemove }) {\n if (movies.length === 0) {\n return

    No movies here yet.

    ;\n }\n return (\n \n );\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n const [filter, setFilter] = useState('all');\n\n const left = movies.filter((m) => !m.watched).length;\n const visible = movies.filter((m) =>\n filter === 'all' ? true : filter === 'watched' ? m.watched : !m.watched,\n );\n\n function handleAdd(title) {\n setMovies([...movies, { id: nextId++, title, watched: false }]);\n }\n\n function handleToggle(id) {\n setMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));\n }\n\n function handleRemove(id) {\n setMovies(movies.filter((m) => m.id !== id));\n }\n\n return (\n
    \n

    Watchlist

    \n

    {left} to watch

    \n \n \n \n
    \n );\n}\n"},"checks":[{"id":"count","test":"return text('#count') === '2 to watch';"},{"id":"add","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await input('#title', 'Paddington 2'); const __f = $('form'); if (__f) __f.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); else await click($('button')); await tick(20); return titles() === 'Arrival|Past Lives|Dune: Part Two|Paddington 2' && text('#count') === '3 to watch';"},{"id":"toggle","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(row('Past Lives').querySelector('.toggle')); return text('#count') === '2 to watch' && text(row('Past Lives').querySelector('.toggle')) === 'Watched';"},{"id":"filter","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(filterBtn('Watched')); if (titles() !== 'Arrival|Past Lives') return false; await click(filterBtn('To watch')); return titles() === 'Dune: Part Two|Paddington 2';"},{"id":"remove","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(row('Dune: Part Two').querySelector('.remove')); return titles() === 'Paddington 2' && text('#count') === '1 to watch';"},{"id":"empty","test":"const titles = () => $$('li .title').map((s) => text(s)).join('|'); const row = (t) => $$('li').find((li) => text(li.querySelector('.title')) === t); const filterBtn = (t) => $$('.filters button').find((b) => text(b) === t); await click(row('Paddington 2').querySelector('.remove')); return !$('ul') && text('.empty') === 'No movies here yet.' && text('#count') === '0 to watch';"}],"title":"Assemble the Watchlist","prompt":"

    All the components are written; App isn’t wired up. Make it work:

    \n\n

    Only change App. (Saving to localStorage is left out: the playground blocks storage. In your Vite project, use the storage.js module from the lesson.)

    \n","hints":["Two useState calls: useState(INITIAL) and useState('all').","Derive left and visible from them during render; neither should be state.","Three handlers: add ([...movies, { id: nextId++, title, watched: false }]), toggle (movies.map(…) with a spread), remove (movies.filter(…)). Pass them and setFilter down."],"explanation":"

    App owns exactly two pieces of state. The count and the visible list are derived on every render, so they can never disagree with the movies. Each handler replaces the array instead of mutating it (spread to add, map to toggle, filter to remove), and the children only call the functions they’re given. Notice that the empty state, the aria-pressed buttons and the trimmed input all came for free from components you already wrote: the wiring is all that was left.

    \n","checkLabels":{"count":"Shows “2 to watch” at the start","add":"Adding “Paddington 2” appends it and updates the count","toggle":"Mark watched on Past Lives updates its button and the count","filter":"The Watched and To watch filters show the right movies","remove":"Remove deletes a movie and updates the count","empty":"Removing the last visible movie shows “No movies here yet.”"}},"words":722,"readMinutes":3}