← All notes

Answer: You can store data in JavaScript objects and arrays and use methods like map() and filter() to render lists of components from them. (S1)

Keys

• Each child in a list should have a unique "key" prop. (S1)
• Keys tell React which array item each component corresponds to, so that it can match them up later. (S1)
• A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. (S1)
• If your data is coming from a database, you can use the database keys/IDs, which are unique by nature. (S1)
• It's okay to use the same keys for JSX nodes in different arrays. (S1)

Position and state

• React keeps track of which state belongs to which component based on their place in the UI tree. (S2)
• In React, each component on the screen has fully isolated state. (S2)

Claims

• id: C1 claim: A well-chosen key helps React. source: S1 evidence: "A well-chosen key helps React infer what exactly has happened"
• id: C2 claim: Keys match items to components. source: S1 evidence: "Keys tell React which array item each component corresponds to"
• id: C3 claim: Database IDs make good keys. source: S1 evidence: "you can use the database keys/IDs, which are unique by nature."
• id: C4 claim: State is tied to tree position. source: S2 evidence: "They might appear in the same place in the UI"

Sources

• [S1] Rendering Lists – React. React docs (react.dev). https://react.dev/learn/rendering-lists . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.
• [S2] Preserving and Resetting State – React. React docs (react.dev). https://react.dev/learn/preserving-and-resetting-state . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).

@misc{iil_note_915ksmnc,
  author = {{iinventedlight}},
  title = {{Rendering lists and keys in React}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/react-rendering-lists/},
  note = {Permanent ID iil:note:915ksmnc. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/react-rendering-lists.md.