¿Qué significa Objects Not Valid as React Child?

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

function Profile({ user }) {
  return <div>{user}</div>; // user is an object, not a string
}

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.

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

Errores relacionados

• Invalid Hook Call
• Nothing Was Returned from Render