Fragmentos JSX

En JSX, cada bloque de código debe tener un solo elemento raíz. Esto se debe a que JSX compila a llamadas de funciones de React que requieren un solo elemento para ser devuelto. Cuando tienes múltiples elementos sin un elemento raíz, React no puede identificar qué elemento devolver y generará un error.

Aquí tienes un ejemplo de un error común cuando no se utiliza un elemento raíz:

// Incorrecto: No hay un solo elemento raíz
const MiComponente = () => {
    return (
        <h1>Título</h1>
        <p>Párrafo</p>
    );
};

Para corregir este error, necesitas envolver los elementos en un elemento raíz. Aquí tienes algunas formas de hacerlo:

1. Usando un elemento <div> como raíz:

// Correcto: Un solo elemento raíz
const MiComponente = () => {
    return (
        <div>
            <h1>Título</h1>
            <p>Párrafo</p>
        </div>
    );
};

1. Usando un elemento <React.Fragment> como raíz:

// Correcto: Un solo elemento raíz usando React.Fragment
import React from 'react';

const MiComponente = () => {
    return (
        <React.Fragment>
            <h1>Título</h1>
            <p>Párrafo</p>
        </React.Fragment>
    );
};

1. Usando un elemento <></> (fragmentos de React) como raíz (sintaxis abreviada de React.Fragment a partir de React 16.2):

// Correcto: Un solo elemento raíz usando fragmentos de React
const MiComponente = () => {
    return (
        <>
            <h1>Título</h1>
            <p>Párrafo</p>
        </>
    );
};

Puedes usar corchetes para devolver múltiples elementos sin la necesidad de un elemento raíz. Esto se llama “fragmento de array”. Aquí tienes un ejemplo:

const MiComponente = () => {
    return [
        <h1 key="titulo">Título</h1>,
        <p key="parrafo">Párrafo</p>
    ];
};

En este ejemplo, los elementos JSX están contenidos dentro de un array. Cada elemento dentro del array debe tener una clave única para ayudar a React a identificar y rastrear los elementos durante la reconciliación del DOM.

Si bien esta forma es válida y útil en algunos casos, ten en cuenta que no puedes utilizar expresiones dentro de corchetes de la misma manera que lo harías dentro de un elemento JSX normal. Además, el uso de fragmentos de array no es tan común como el uso de un elemento raíz o fragmentos de React, ya que puede ser menos legible y más propenso a errores en comparación con las otras opciones.

Cada una de estas formas te permite tener un solo elemento raíz sin introducir elementos adicionales innecesarios en tu DOM. Puedes elegir la opción que mejor se adapte a tus necesidades y preferencias de codificación.