Solución: cada elemento de una lista necesita una 'key' única en React

¿Por qué ocurre?

Cuando renderizas una lista con .map(), React necesita identificar cada elemento para saber qué actualizar cuando cambia el estado. Sin key (o con keys duplicadas como el índice), React recrea todos los elementos del DOM en cada render en lugar de actualizar solo los que cambian, causando bugs visuales y pérdidas de rendimiento.

Solución paso a paso

Solución básica — añadir key con el ID del dato:

// ❌ Sin key — genera el warning
{productos.map(p => (
  {p.nombre}
))}
// ✅ Con key única — usa el ID del elemento
{productos.map(p => (
  
{p.nombre}
))}

Si tus datos no tienen ID — genera uno estable:

// ✅ Opción 1: usa una propiedad única del objeto
{usuarios.map(u => (
  {u.nombre}
))}
// ✅ Opción 2: si los datos son strings simples y únicos
{['manzana', 'pera', 'naranja'].map(fruta => (
  
{fruta}
))}
// ⚠ Opción 3: índice del array (solo si la lista es estática y no se reordena)
{items.map((item, index) => (
  
{item.texto}
))}

Errores comunes con keys:

// ❌ Key en el fragmento incorrecto
{items.map(item => (
  <>
    {item.termino}  {/* ← mal */}
    {item.def}
  
))}
// ✅ Key en el elemento raíz del map (el Fragment)
{items.map(item => (
  
    
{item.termino}
    {item.def}
  
))}
// ❌ Keys duplicadas — React muestra el warning igual
{[{id: 1, nombre: 'A'}, {id: 1, nombre: 'B'}].map(i => (
  
{i.nombre}  {/* ← id 1 repetido */}
))}

Cómo evitarlo en el futuro

Diseña tus datos con IDs únicos desde el backend (uuid, autoincrement). Nunca uses el índice del array como key en listas dinámicas que se puedan filtrar, ordenar o eliminar elementos — provoca bugs de estado difíciles de debuggear.