Solución: Cannot read properties of undefined (reading 'map') en React

¿Por qué ocurre?

Estás llamando a .map() sobre una variable que todavía es undefined. Ocurre cuando el estado empieza siendo undefined antes de que lleguen los datos (fetch asíncrono), cuando la prop no llega al componente o cuando accedes a una propiedad anidada que no existe todavía.

Solución paso a paso

Solución rápida — valor por defecto:

// ❌ Falla si datos no ha llegado aún
datos.map(item => {item.nombre}
)
// ✅ Array vacío como fallback
(datos ?? []).map(item => 
{item.nombre}
)
// ✅ O con optional chaining
datos?.map(item => 
{item.nombre})

Solución correcta — gestiona el estado de carga:

function ListaProductos() {
  const [productos, setProductos] = useState([]); // ← inicializa como array vacío
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('/api/productos')
      .then(r => r.json())
      .then(data => {
        setProductos(data);
        setLoading(false);
      });
  }, []);
  if (loading) return 
Cargando...
;
  return (
    

      {productos.map(p => {p.nombre})}
    
  );
}

Si el error viene de props:

// ❌ El padre pasa undefined
// En el hijo, pon valor por defecto en la desestructuración:
function MiComponente({ items = [] }) {
  return items.map(i => 
{i.nombre});
}

Cómo evitarlo en el futuro

Inicializa siempre el estado que será un array como [] y no como undefined o null. Usa valores por defecto en la desestructuración de props. Si los datos vienen de una API, gestiona el estado loading/error antes de renderizar la lista.