React Lists Keys map key Prop: Tutorial, Examples, FAQs & Interview Tips

Rendering Lists in React

React often needs to display repeated data such as products, users, comments, menu items, or notifications. Rendering lists means taking an array of data and turning each item into JSX using map().

Basic List Example

const fruits = ['Apple', 'Banana', 'Orange']

function FruitList() {
    return (
        <ul>
            {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
        </ul>
    )
}

What Are Keys?

Keys are special values React uses to identify which list items changed, were added, or were removed. They help React update lists efficiently and correctly. A key should be stable and unique among siblings.

List of Objects

const users = [
    { id: 1, name: 'Aman' },
    { id: 2, name: 'Riya' },
]

function UserList() {
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    )
}

Nested Lists

const categories = [
    { id: 1, title: 'Frontend', topics: ['HTML', 'CSS', 'React'] },
    { id: 2, title: 'Backend', topics: ['Node.js', 'Express'] },
]

function CategoryList() {
    return (
        <div>
            {categories.map(category => (
                <div key={category.id}>
                    <h3>{category.title}</h3>
                    <ul>
                        {category.topics.map(topic => (
                            <li key={topic}>{topic}</li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    )
}

Dynamic List Example

import { useState } from 'react'

function TodoList() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Learn React' },
        { id: 2, text: 'Practice hooks' },
    ])

    function removeTodo(id) {
        setTodos(current => current.filter(todo => todo.id !== id))
    }

    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>
                    {todo.text}
                    <button onClick={() => removeTodo(todo.id)}>Remove</button>
                </li>
            ))}
        </ul>
    )
}

Why Stable Keys Matter

Stable keys help React match the correct item between renders. If the wrong key is used, React may reuse the wrong DOM element or component instance, which can cause visual bugs or incorrect input behavior.

Best Practices for Keys

Use unique stable IDs when available
Avoid array indexes as keys when list order can change
Keep keys on the outermost rendered element inside map()
Keys only need to be unique among siblings, not globally

Common Mistakes

Mistake	Why it is risky	Better approach
Using array indexes as keys in reordering lists	Can cause wrong items to keep wrong state	Use a stable unique ID
Forgetting the key entirely	Causes React warnings and weak diffing	Add a unique key in each mapped element
Using non-unique keys	Can confuse React updates	Choose keys that are unique among siblings

Summary

Lists are a common part of React applications, and map() is the usual way to render them. Keys are essential because they help React track which items changed between renders. Once you understand lists and keys well, you can build dynamic collections much more reliably.

Key Takeaways

React commonly renders repeated data by mapping arrays into JSX.
Keys help React identify which list items changed, were added, or were removed.
Stable unique IDs are the best keys for most dynamic lists.
Indexes are only safe in simple lists that never reorder or change structure.
Missing or unstable keys can cause subtle rendering bugs.