Lists & Keys in React

From the React Components & JSX cheat sheet · JSX Fundamentals · verified Jul 2026

Lists & Keys

Render arrays with map and unique keys

javascript
function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build an app' },
    { id: 3, text: 'Deploy it' }
  ]
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  )
}
🟢 Essential - Always include key prop in lists
💡 Keys help React track changes efficiently
⚠️ Keys must be unique among siblings
jsxlistskeysessential

More React tasks

Back to the full React Components & JSX cheat sheet