React Lists Keys — Free React Tutorial
Learn React Lists Keys in React with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn React Lists Keys in React with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated
React Lists Keys in React
Rendering lists in React is done using the `map()` function to transform an array of data into an array of JSX elements. Each element in a list should have a unique `key` prop to help React identify which items have changed. Keys help React match old elements with new ones during re-renders, which improves performance and prevents bugs with state. Without proper keys, React might render elements incorrectly or in the wrong order.
The `key` should be a unique identifier that is stable across re-renders, like an ID from your data. Avoid using array indices as keys if the list can be reordered, sorted, or have items added/removed, because the index changes and React will lose track of component state. A good key comes from your data: `<li key={todo.id}>{todo.text}</li>`. Keys don't need to be globally unique, only unique among siblings.
When rendering lists, always use the `key` prop on the outermost element being repeated. React uses keys to match elements across re-renders. Without keys, if your list state changes, React may re-render elements unnecessarily or mix up their internal state, causing bugs that are hard to debug.
React Lists Keys — Syntax
{items.map((item) => <li key={item.id}>{item.name}</li>)}
Learn React Lists Keys step by step with Syllab's free interactive React tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full React course →