Fragmentos: agrupar sin un div extra

El problema del elemento raíz

Recuerda una regla del JSX: un componente debe devolver un solo elemento raíz. Si intentas devolver dos elementos hermanos, da error:

// ❌ Error: dos elementos raíz
function Datos() {
  return (
    <h1>Título</h1>
    <p>Descripción</p>
  );
}

La solución clásica es envolverlos en un <div>. Pero a veces ese <div> extra estorba: ensucia el HTML, puede romper diseños con CSS (flex, grid, tablas) o añadir nodos innecesarios al árbol.

La solución: fragmentos

Un fragmento agrupa varios elementos sin crear un nodo extra en el DOM. Se escribe con la sintaxis corta <>...</>:

function Datos() {
  return (
    <>
      <h1>Título</h1>
      <p>Descripción</p>
    </>
  );
}

Esto renderiza el <h1> y el <p> como hermanos directos, sin ningún <div> que los envuelva. En el navegador no verás ningún contenedor adicional.

Fragmentos con key en listas

La forma corta <>...</> no admite props. Cuando necesitas un fragmento con key (por ejemplo, dentro de un .map() que devuelve varios elementos por fila), usa la forma larga <React.Fragment>:

{items.map((item) => (
  <React.Fragment key={item.id}>
    <dt>{item.termino}</dt>
    <dd>{item.definicion}</dd>
  </React.Fragment>
))}

Regla práctica: usa <>...</> por defecto; cambia a <React.Fragment key={...}> solo cuando necesites pasarle una key.