Warning: Each child in a list should have a unique "key" prop

What causes this error

React uses the key prop to track which list items changed, were added, or were removed between renders, so it can update the DOM efficiently instead of re-rendering everything. Without a stable key, React can't reliably match items across renders — which causes this warning, and can also cause real bugs like form inputs or component state "sticking" to the wrong item after a reorder.

The Fix

// Wrong — no key at all
{articles.map((article) => (
  <ArticleCard article={article} />
))}

// Also risky — index as key breaks if the list ever reorders or filters
{articles.map((article, index) => (
  <ArticleCard key={index} article={article} />
))}

// Fix — use a stable, unique field from the actual data
{articles.map((article) => (
  <ArticleCard key={article.id} article={article} />
))}

Common causes / variations

• Forgetting the key prop entirely on a mapped array
• Using the array index as a key on a list that can be sorted, filtered, or have items removed from the middle
• Using a non-unique value (like a category name shared by multiple items) as the key

Related errors

See also: Maximum update depth exceeded.