React es una popular biblioteca JavaScript para construir interfaces de usuario, ampliamente utilizada por desarrolladores de todo el mundo. Simplifica el proceso de creación de interfaces de usuario complejas proporcionando componentes reutilizables y gestión de estados.
Tanto si usas React como principiante o como desarrollador experimentado, no es raro ver mensajes de error como «Objects Are Not Valid as a React Child»
En este artículo, exploraremos las causas de este error y proporcionaremos soluciones que puedes utilizar para solucionarlo.
¿Qué causa el error «Objects Are Not Valid as a React Child»?
El error «Objects Are Not Valid as a React Child» es un error común en la programación React. Se produce cuando un componente recibe un objeto como hijo en lugar de un elemento React válido. El mensaje de error suele tener este aspecto:
El mensaje de error implica que el componente ha recibido un objeto en lugar de un elemento React hijo válido (como cadenas, números o elementos React, pero no matrices u objetos). La causa principal de este error es pasar un tipo de datos no válido y no serializable como hijo.
1. Pasar un objeto como hijo
export default function App() {
return (
<div>
{{ message: "Hello world!" }}
</div>
);
}En este ejemplo, el componente App intenta renderizar un objeto como elemento hijo. Esto provocará el error «Objects Are Not Valid as a React Child», ya que React no reconoce los objetos como elementos hijos válidos.
2. Pasar datos no serializables como hijo
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{message}
</div>
);
}En el código anterior, el componente App intenta mostrar un tipo de datos no serializable (un objeto) como elemento hijo. Esto provocará el error «Objects Are Not Valid as a React Child», ya que React requiere que todos los elementos hijos sean serializables.
3. Pasar un array como hijo
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
<span>{students}</span>
<div>{locale}</div>
</>
);
}En este código, tenemos un array students y un objeto locale que estamos intentando representar como hijos. Sin embargo, pasar un array o un objeto como hijo no es válido en React – este código provocará el error «Objects Are Not Valid as a React Child».
Cómo solucionar el error «Objects Are Not Valid as a React Child»
Para solucionar este error, es importante recordar que las matrices y los objetos son iterables en JavaScript. JavaScript considera las matrices como un tipo especial de objeto, por lo que el mensaje de error seguirá diciendo «Objects Are Not Valid as a React Child» aunque el problema sea con una matriz.
Para acceder a los datos de una matriz o un objeto, puedes iterar por la matriz mediante un bucle, acceder a elementos concretos utilizando su número de índice o utilizar la notación con puntos para los objetos.
Estas son algunas de las soluciones más comunes:
1. Convertir objetos en cadenas o números
Una forma de solucionar el error es convertir el objeto en una cadena o un número antes de pasarlo como hijo. Por ejemplo
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{JSON.stringify(message)}
</div>
);
}En este ejemplo, convertimos el objeto message en una cadena utilizando el método JSON.stringify() antes de pasarlo como elemento hijo. Esto evitará que se produzca el error «Objects Are Not Valid as a React Child».
2. Renderizar los arrays correctamente con el método map()
Otra causa común del error es el uso incorrecto de los arrays en React. Si intentas renderizar una matriz directamente como elemento hijo, provocarás el error «Objects Are Not Valid as a React Child».
En su lugar, debes utilizar el método map() para convertir cada elemento de la matriz en un elemento hijo válido de React.
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
{students.map((student, index) => (
<div key={index}>
<span>{student.name}</span>
<span>{student.age}</span>
</div>
))}
<div>
{locale.state}, {locale.country}
</div>
</>
);
}En este código, utilizamos el método map() para iterar sobre la matriz students y convertir cada elemento en un div que contiene el nombre y la edad del estudiante. También añadimos una clave prop a cada elemento hijo para optimizar el rendimiento de la representación.
3. Utilizar el renderizado condicional para evitar renderizar tipos de datos no válidos
Si pasas datos que podrían no ser válidos como hijo de React, puedes utilizar la renderización condicional para evitar que se produzca el error.
function App() {
const message = { text: "Hello world!" };
return (
<div>
{typeof message === 'string' ? message : null}
</div>
);
}En este ejemplo, utilizamos la representación condicional sólo para mostrar el mensaje si es una cadena. Esto evitará que se produzca el error «Los objetos no son válidos como hijos de React».
Buenas prácticas para evitar el error «Objects Are Not Valid as a React Child»
Para evitar que se produzca el error «Objects Are Not Valid as a React Child» en primer lugar, es importante seguir las mejores prácticas al crear componentes React. Algunas de las mejores prácticas recomendadas más importantes son
- Pasa siempre elementos React hijos válidos como hijos
- Evitar pasar datos no serializables como hijos
- Utiliza la renderización condicional para manejar casos extremos y tipos de datos no válidos
Resumen
En este artículo, hemos aprendido a resolver el error «Objects Are Not Valid as a React Child» en todos los escenarios posibles y las mejores prácticas para evitar que se produzca el error.
Es importante recordar que los arrays se consideran un tipo especial de Objeto, por lo que si no realizas un bucle a través de un array antes de renderizarla en tu aplicación React, se producirá el error «Objects Are Not Valid as a React Child».
Si tienes una aplicación React que quieres compartir con el mundo, echa un vistazo al servicio de Alojamiento de Aplicaciones de Kinsta. Puedes empezar gratis.
¡Comparte tu experiencia! ¿Te has encontrado antes con este problema? Si es así, ¿cómo lo resolviste? ¿Utilizaste algún otro método no mencionado en este artículo? Háznoslo saber en los comentarios.
