Solución: Objects are not valid as a React child

¿Por qué ocurre?

React solo puede renderizar strings, números, booleanos, arrays o elementos JSX. Si intentas renderizar directamente un objeto JavaScript (como {usuario}, new Date(), o {error}), React no sabe cómo convertirlo en HTML y lanza este error.

Solución paso a paso

Identifica qué estás renderizando — abre las DevTools:

// Añade temporalmente un console.log antes del return
console.log(typeof miVariable, miVariable);

Causa 1 — Renderizas un objeto entero:

// ❌ Error
{usuario}
  // usuario = { nombre: "Fran", edad: 30 }
// ✅ Accede a la propiedad que quieres mostrar
{usuario.nombre}

Causa 2 — Renderizas un Date:

// ❌ Error
{articulo.fecha}  // fecha es un objeto Date// ✅ Conviértelo a string primero
{articulo.fecha.toLocaleDateString('es-ES')}
// o
{new Date(articulo.fecha).toLocaleDateString('es-ES')}

Causa 3 — Renderizas un objeto de error:

// ❌ Error
{error && {error}
}  // error es un objeto Error de JS
// ✅ Usa el mensaje
{error && 
{error.message}}

Causa 4 — Datos de API sin procesar:

// ❌ La API devuelve { data: [...] } y renderizas todo
{respuestaApi}
// ✅ Accede a la propiedad correcta
{respuestaApi.data.map(item => {item.nombre})}

Cómo evitarlo en el futuro

Nunca renderices directamente una variable sin saber su tipo. Convierte fechas con toLocaleDateString() o una librería como date-fns. Para mostrar objetos en debug, usa JSON.stringify() temporalmente: <pre>{JSON.stringify(objeto, null, 2)}</pre>.