PromptHub
Back to Errors
Frontend Beginner 128 views

React Key Warning

React warns that list items are missing unique "key" props for efficient rendering.

Explanation

React Key Warning is a console warning (not an error) that occurs when rendering a list of elements without providing unique "key" props. React uses keys to efficiently track which items have changed, been added, or removed. Without keys, React falls back to index-based comparison, which can cause incorrect updates, performance issues, and state bugs. Common causes include using array index as key (which changes during reordering), forgetting to add keys, or using non-unique values as keys.

Common Causes

  • List items missing key prop
  • Using array index as key for dynamic lists
  • Non-unique key values
  • Using object references as keys
  • Key prop missing on Fragment wrappers

Solution

Always provide a unique, stable key prop when rendering lists. Use unique identifiers from your data (database IDs, UUIDs) as keys. Never use array indices as keys if the list can be reordered, filtered, or have items added/removed. Ensure keys are strings or numbers, not objects. For form elements, use unique field names or IDs. In React 18+, use the React DevTools to identify which components are missing keys. Consider using the Fragment shorthand with keys when wrapping list items.

Code Example 

// Warning: missing key
function UserList({ users }) {
    return (
        <ul>
            {users.map(user => (
                <li>{user.name}</li>  // missing key!
            ))}
        </ul>
    );
}

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

// Don't use index as key for dynamic lists
{users.map((user, index) => (
    <li key={index}>{user.name}</li>  // bad if list can reorder!
))}

// Use stable unique ID
{users.map(user => (
    <li key={user.uuid}>{user.name}</li>  // good!
))}

// For Fragments with keys
import { Fragment } from 'react';
{items.map(item => (
    <Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.definition}</dd>
    </Fragment>
))}

Error Information

Language

javascript

Framework

react

Difficulty

Beginner

Views

128

Related Errors

General

Circular Dependency Detected

Module A depends on B which depends on A, creating an unresolvable import cycle.
JavaScript

ReferenceError: X is not defined

The code references a variable or function that hasn't been declared.
Frontend

Hydration Mismatch (SSR)

The server-rendered HTML doesn't match what the client-side JavaScript expected to render.
ERR_MODULE_NOT_FOUND Node.js

ERR_MODULE_NOT_FOUND

Node.js cannot find the specified ES module file.
All tools