Componenta Fragment (<>…</>) în React: Gruparea Elementelor fără Noduri DOM Parazite în React & Next.js

În JSX, o componentă este obligată să returneze un singur nod rădăcină. Folosirea tradițională a unui element <div> pentru împachetarea elementelor multiple introduce adesea noduri DOM inutile, care strică structurile CSS stricte (Flexbox, CSS Grid) sau sintaxa HTML validă (de exemplu în tabele <table><tr> sau liste de definiții <dl>).

Componenta Fragment (sau forma scurtă <>...</>) permite returnarea mai multor noduri surori fără a adăuga niciun element fizic în DOM.

import { Fragment } from 'react';

export function GlosarTermeni({ termeni }) {
  return (
    <dl>
      {termeni.map(termen => (
        // Când este nevoie de atributul 'key', folosim sintaxa explicită Fragment:
        <Fragment key={termen.id}>
          <dt>{termen.titlu}</dt>
          <dd>{termen.definitie}</dd>
        </Fragment>
      ))}
    </dl>
  );
}