← Errores
React solo puede renderizar cadenas, números, booleanos, null, undefined y elementos React como hijos. Pasar un objeto JavaScript plano directamente como contenido JSX lanza este error porque React no sabe cómo serializar un objeto arbitrario al DOM.
Por qué ocurre
- •Renderizar un objeto completo en lugar de una de sus propiedades de cadena.
- •Pasar accidentalmente un objeto Date en lugar de llamar a .toLocaleDateString().
- •Renderizar el resultado de una llamada API antes de que se transforme en datos renderizables.
- •Una Promise o array de objetos colocados directamente en JSX.
Ejemplos
JavaScript
Código que causa el error
function Profile({ user }) {
return <div>{user}</div>; // user is an object, not a string
}Error en la terminal
Error: Objects are not valid as a React child (found: object with keys {name, email}).
If you meant to render a collection of children, use an array instead.Cómo solucionarlo
Accede a la propiedad de cadena o número específica que quieres mostrar. Usa JSON.stringify(obj) solo para depuración (no para UI de producción). Transforma las respuestas de la API en primitivos renderizables antes de renderizarlos.
Código corregido
function Profile({ user }) {
return (
<div>
<span>{user.name}</span>
<span>{user.email}</span>
</div>
);
}Errores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis