JavaScript

Qué significa Objects Not Valid as React Child y cómo solucionarlo

Referencia del error

Objects Not Valid as React Child

Lenguaje

JavaScript

Severidad

Alta

Cuándo ocurre

React solo puede renderizar cadenas, números, booleanos, null, undefined y elementos React como hijos.

Posibles soluciones

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.

Errores relacionados

Invalid Hook Call Nothing Was Returned from Render

Más detalles

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.

Posibles soluciones

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.

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ódigo corregido

function Profile({ user }) {
  return (
    <div>
      <span>{user.name}</span>
      <span>{user.email}</span>
    </div>
  );
}

Practica en inglés

¿Cómo le explicarías un Objects Not Valid as React Child a un compañero dev? Elige la frase correcta:

"I hit an error...

¿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