JSX, que significa JavaScript XML, es una extensión de sintaxis para React que permite a los desarrolladores escribir código similar al HTML en sus archivos JavaScript.
Al trabajar con JSX, los principiantes suelen encontrarse con un error común que dice: «JSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)». Este error se produce cuando se devuelven varios elementos en una única expresión sin estar envueltos en un elemento padre.
Este error también es muy similar al error «Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>? (Los elementos JSX adyacentes deben estar envueltos en una etiqueta envolvente». ¿Querías un fragmento JSX <>…</>?)».
En este artículo, aprenderás las diferentes soluciones que puedes utilizar para evitar este problema común cuando trabajas con React.
¿Qué causa el error «JSX expressions must have one parent element»?
En JSX, existe una regla que establece que siempre debe devolver un único elemento. Esta regla se aplica a React, lo que significa que cada componente sólo puede devolver un único elemento raíz.
Esto se debe a que cuando renderizas un componente, React crea un árbol DOM virtual correspondiente al HTML que se renderiza finalmente en la página. Si hay varios elementos raíz en el JSX, React no sabe cómo manejarlos, lo que provoca el error «JSX expressions must have one parent element» o «Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?»
Por ejemplo, si intentas renderizar el siguiente código JSX:
function App() {
return (
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
)
}Obtendrás el error «JSX expressions must have one parent element»:
O el error «Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?» error:
Esto se debe a que se devuelven dos elementos raíz (<h1> y <p>.
JSX funciona de forma similar a una función, porque las funciones no pueden devolver varios valores (a menos que estén encerrados en un array, que se considera un único valor).
function myFunc() {
return value1;
return value2;
}La segunda sentencia de retorno de la función render es inalcanzable porque la primera sentencia de retorno siempre se ejecutará, haciendo imposible que se ejecute la segunda.
3 Formas de Solucionar el Error «JSX expressions must have one parent element”
Hay tres formas principales de solucionar este error, estos métodos son:
- Usando un Contenedor Div
- Usando un Fragmento (<> and </>)
- Usando el componente React.Fragment
1. Envolver Todos los Elementos con un Contenedor Div
Una de las soluciones más sencillas al error «JSX expressions must have one parent element» es envolver los múltiples elementos JSX en un único elemento padre, como un <div>.
Esto te permite agrupar y representar los elementos como una sola unidad. Por ejemplo, considera el siguiente componente:
function App() {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
)
}En este ejemplo, los elementos <h1> y <p> están envueltos en un elemento <div>, que sirve como elemento padre.
2. Envolver Todos los Elementos con un Fragmento
Otra forma de solucionar el problema de «JSX expressions must have one parent element» o «Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?» es utilizar un Fragmento JSX.
Un Fragmento es una función incorporada de React que te permite agrupar una lista de hijos sin añadir nodos adicionales al DOM. Puedes utilizar un Fragmento para envolver varios elementos en un único elemento padre sin añadir un nodo DOM adicional al HTML renderizado. Por ejemplo, aquí tienes un componente:
function App() {
return (
<>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</>
)
}En este ejemplo, se utiliza un Fragmento JSX (<> and </>) para envolver los múltiples elementos. Este fragmento actúa como elemento padre.
3. Envolver Todos los Elementos con React.Fragment
Por último, otra forma de solucionar el error «JSX expressions must have one parent element» es utilizar el componente React.Fragment en lugar de un elemento normal.
Esto funciona de forma similar a utilizar un Fragmento JSX, pero es un poco más explícito y puede ser útil si quieres dar a tu elemento padre una clave específica u otras propiedades. Por ejemplo, aquí tienes un componente:
function App() {
return (
<React.Fragment>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</React.Fragment>
)
}En este ejemplo, se utiliza el componente React.Fragment en lugar de un componente normal como elemento padre. Envuelve múltiples elementos dentro de las etiquetas, lo que te permite agrupar los elementos sin añadir un nodo extra al HTML renderizado.
El componente React.Fragment requerirá que importes React. También te permite añadir props, así como className, style, e id al propio fragmento, lo que resulta útil cuando quieres aplicar estilos u otros atributos al grupo de elementos dentro del fragmento.
Cómo Solucionar el Error «JSX expressions must have one parent element» en Condicionales
Cuando trabajas con sentencias condicionales utilizando los operadores ternarios en React, es habitual encontrarse con el mensaje de error «JSX expressions must have one parent element» o «Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?».
Esto ocurre cuando se devuelven varios elementos dentro de una sentencia condicional. En ese caso, React no podrá renderizarlos correctamente, y se producirá cualquiera de los dos errores.
function App() {
return (
<div>
{condition ? (
<h1>Heading 1</h1>
<p>Paragraph 1</p>
) : (
<h2>Heading 2</h2>
<p>Paragraph 2</p>
)}
</div>
)
}Puedes solucionar este error con cualquiera de los tres métodos explicados en este artículo. Preferiblemente puedes utilizar el fragmento React (<> and </>) o el elemento <div>.
function App() {
return (
<div>
{condition ? (
<>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</>
) : (
<>
<h2>Heading 2</h2>
<p>Paragraph 2</p>
</>
)
}
</div>
)
}Resumen
El error «JSX expressions must have one parent element» o «Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?» es un obstáculo habitual al que se enfrentan los principiantes cuando aprenden React.
Utilizar una envoltura <div> es la solución más sencilla, pero puede añadir divs innecesarios al DOM. Los fragmentos proporcionan una solución más limpia sin añadir nodos adicionales al DOM.
Ahora te toca a ti: ¿Te has encontrado alguna vez con este problema? ¿Cómo lo resolviste? ¿Hay algún otro método que hayas utilizado y que no se haya tratado en este artículo? ¡Háznoslo saber en los comentarios!
