- \n {movies.map((movie, index) => (\n
- \n {movie.title} ({movie.year})\n \n \n ))}\n
The Watchlist is a list. So is a feed, a table of orders, a set of search results, a menu. Most UI is lists of things built from arrays of data, and React’s approach is the one you’d guess from JavaScript: transform the array of data into an array of elements.
\nmapexport default function MovieList({ movies }) {\n return (\n <ul>\n {movies.map((movie) => (\n <li key={movie.id}>\n {movie.title} ({movie.year})\n </li>\n ))}\n </ul>\n );\n}map returns an array of <li> elements, and React renders arrays by rendering each item in order. There’s no special loop syntax to learn; it’s the array method you already know.
Filtering and sorting are the same idea: prepare the array, then map it. Do it during render, from the data you have. The visible list is derived, so it doesn’t need to be state.
\nconst movies = [\n { id: 'a1', title: 'Arrival', year: 2016, watched: true },\n { id: 'p2', title: 'Past Lives', year: 2023, watched: false },\n { id: 'd3', title: 'Dune: Part Two', year: 2024, watched: false },\n];\n\nconst toWatch = movies\n .filter((m) => !m.watched)\n .toSorted((a, b) => b.year - a.year);\n\nconsole.log(toWatch.map((m) => m.title)); // [\"Dune: Part Two\", \"Past Lives\"]\nconsole.log(movies[0].title); // Arrival (the original order is untouched)toSorted returns a sorted copy and is supported in every current browser. The older sort reorders the array in place. Called on state or props, that silently mutates data you don’t own. If you need to support older browsers, copy first: [...movies].sort(…).
Every element in a list needs a key prop, and React warns in the console when one is missing. The reason becomes clear when the list changes.
When React re-renders a list, it has the old array of elements and the new one. It needs to match them up: which new element is the same item as which old one? That matters because each item may have state, such as a half-typed note in an input, a focused button or an open menu, and that state must stay with the right item.
\nThe key is the item’s name tag. React matches old and new elements by key. Same key: it’s the same item, so React keeps its DOM and state and updates what changed. New key: a new item, so React creates it. Missing key: the item was removed, so React destroys it.
\nA good key is unique among siblings and stable: the same item has the same key on every render.
\n{ id: crypto.randomUUID(), title, year }. It’s stored on the object and never changes.key={Math.random()} or key={crypto.randomUUID()} inside map produces new keys every render. React treats every row as brand new, tears down the DOM and loses input focus and state each time you type.Keys only need to be unique among siblings in the same list. Two different lists can use the same ids.
\n\nThe key goes on the outermost element returned from the map callback. When that’s a component, put it on the component:
{movies.map((movie) => (\n <MovieItem key={movie.id} movie={movie} />\n))}MovieItem can’t read key; React uses it and doesn’t pass it down. If the component needs the id, pass it separately as a prop.
When each item renders several siblings without a wrapper, use the long form of a fragment, which accepts a key:
\nimport { Fragment } from 'react';\n\n{movies.map((movie) => (\n <Fragment key={movie.id}>\n <dt>{movie.title}</dt>\n <dd>{movie.year}</dd>\n </Fragment>\n))}The short <>…</> syntax can’t take a key.
You can now render any list correctly. That completes the static Watchlist. In the next section, it starts to move: state lets the list change when the user clicks, types and submits.
\n","toc":[{"id":"sec-1","text":"From data to elements with map","level":2},{"id":"sec-2","text":"What keys are for","level":2},{"id":"sec-3","text":"Choosing a key","level":2},{"id":"sec-4","text":"Keys on components and fragments","level":2}],"takeaways":["Turn an array of data into an array of elements withmap, and put the key on the outermost element the callback returns.","A key tells React which item is which between renders, so it must be unique among siblings and stable over time.","Use an id from your data as the key; create ids when items are created, never during render.","Index keys break when the list can be reordered, filtered or inserted into, because state sticks to the position instead of the item.","Filter and sort copies of your data while rendering; sort changes the array in place, so use toSorted or sort a copy."],"further":[{"title":"Rendering Lists","url":"https://react.dev/learn/rendering-lists"},{"title":"Preserving and Resetting State","url":"https://react.dev/learn/preserving-and-resetting-state"},{"title":"Array.prototype.toSorted() on MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted"}],"quiz":[{"q":"Where does the key go?
\nfunction MovieList({ movies }) {\n return (\n <ul>\n {movies.map((movie) => (\n <MovieItem movie={movie} />\n ))}\n </ul>\n );\n}<li> inside MovieItem, as <li key={movie.id}>.","why":"React needs keys on the elements in the array you return from map. Inside MovieItem there’s only one <li>, so a key there does nothing."},{"text":"On the <ul>, as <ul key="movies">.","why":"The <ul> isn’t one of many siblings. The items inside it are what React has to tell apart."},{"text":"On MovieItem itself, as <MovieItem key={movie.id} movie={movie} />.","why":"Correct. The key belongs on the outermost element returned from the map callback, which here is the component."},{"text":"Nowhere, because components get automatic keys.","why":"React falls back to the index and warns in development. That fallback is exactly what causes bugs when the list changes."}],"answer":2},{"q":"Each movie row has a text input for a note. You type “Loved it” next to Arrival, then add a new movie to the top of the list. With key={index}, where does “Loved it” end up?
key={movie.id}. With index keys React matches rows by position, not by movie."},{"text":"Next to the new movie at the top, because it now has index 0, the key Arrival’s row had.","why":"Correct. React reuses the row with key 0, including its input’s DOM state, for whatever is now at position 0."},{"text":"It disappears, because every row is re-created.","why":"React doesn’t re-create rows whose keys still exist. It reuses them, which is precisely why the note moves."},{"text":"React throws a duplicate key error.","why":"Indices are unique, so there’s no duplicate. The bug is silent, which is what makes it dangerous."}],"answer":1},{"q":"Which key is a good choice for movies the user adds through a form?
","options":[{"text":"key={Math.random()} in the map callback.","why":"A new key on every render makes React destroy and re-create every row each time, losing focus and state."},{"text":"key={movie.title}","why":"Titles aren’t unique; there are several films called “Dune”. Two siblings with the same key confuse React."},{"text":"key={index}, because the user only adds movies.","why":"Users will also remove, filter and sort. Index keys break as soon as items move relative to each other."},{"text":"An id created once with crypto.randomUUID() when the movie is added, and stored on the movie object.","why":"Correct. The id is created with the data, stays the same for the movie’s lifetime, and is unique."}],"answer":3},{"q":"movies comes from state. What’s the problem with const sorted = movies.sort((a, b) => b.year - a.year); in the render code?
sort reorders movies in place, so you’re mutating state during render.","why":"Correct. Use movies.toSorted(…) or [...movies].sort(…) to sort a copy and leave state untouched."},{"text":"sort can’t compare numbers.","why":"With a compare function like (a, b) => b.year - a.year, sort orders numbers correctly."},{"text":"Sorting must happen in an effect, not during render.","why":"Calculating a derived value during render is exactly right. The issue is changing the original array."}],"answer":0}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival', year: 2016 },\n { id: 'p2', title: 'Past Lives', year: 2023 },\n];\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL);\n\n function addDune() {\n setMovies([{ id: 'd3', title: 'Dune: Part Two', year: 2024 }, ...movies]);\n }\n\n // 1. Show the movies newest first, without changing `movies` itself.\n // 2. Fix the key so each note stays with its movie.\n return (\n Each movie row has a note input. Two problems:
\nyear). Sort a copy during render; don’t change the movies state.Keep the markup the same: one <li> per movie with a <span> (title and year) and an <input>.
movies.toSorted((a, b) => b.year - a.year) returns a new, sorted array and leaves movies alone.","Map over the sorted copy, not over movies.","Each movie already has a stable id. Use key={movie.id} instead of the index."],"explanation":"With key={index}, React matches rows by position. Adding a movie shifts everything down, so the row that used to be Arrival’s (key 0 in the starter) is reused for whichever movie now sits at that position, with the note still in its input. With key={movie.id}, React knows the Arrival row is the same item as before and moves it, input value and all. Sorting a copy during render keeps movies as the single source of truth; the newest-first order is derived from it every time.