El componente Fragment, que es se suele utilizar a travĂ©s de la sintaxis <>...</>, te permite renderizar mĂșltiples elementos en lugar de uno, sin tener que envolverlos dentro de otro elemento contenedor.

<>
<OneChild />
<AnotherChild />
</>

Uso

Retornar mĂșltiples elementos

Usa Fragment, o la sintaxis equivalente <>...</>, para agrupar mĂșltiples elementos. Puedes usarlo para poner mĂșltiples elementos en cualquier lugar donde un solo elemento puede ir. Por ejemplo, un componente solo puede retornar un elemento, pero usando un Fragmento puedes agrupar mĂșltiples elementos y retornarlos como un grupo:

function Post() {
return (
<>
<PostTitle />
<PostBody />
</>
);
}

Los Fragmentos son Ăștiles porque la agrupaciĂłn de elementos con un Fragmento no tiene efecto en el diseño o los estilos, al contrario de cĂłmo serĂ­a si envolvieras los elementos dentro de cualquier otro contenedor tal como un elemento del DOM. Si inspeccionas este ejemplo con las herramientas del navegador, verĂĄs que todos los nodos del DOM <h1> y <p> aparecen como hermanos sin envoltorios alrededor de ellos:

export default function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

Deep Dive

ÂżComo escribir un fragmento sin la sintaxis especial?

El ejemplo anterior es equivalente a importar Fragment de React:

import { Fragment } from 'react';

function Post() {
return (
<Fragment>
<PostTitle />
<PostBody />
</Fragment>
);
}

Usualmente no necesitarĂĄs esto a menos que necesites pasar una key a tu Fragment.


Asignar mĂșltiples elementos a una variable

Como cualquier otro elemento, puedes asignar Fragmentos a variables, pasarlos como props, y asĂ­ sucesivamente:

function CloseDialog() {
const buttons = (
<>
<OKButton />
<CancelButton />
</>
);
return (
<AlertDialog buttons={buttons}>
Are you sure you want to leave this page?
</AlertDialog>
);
}

Agrupar elementos con texto

Puedes usar Fragment para agrupar texto con componentes:

function DateRangePicker({ start, end }) {
return (
<>
From
<DatePicker date={start} />
to
<DatePicker date={end} />
</>
);
}

Renderizar una lista de fragmentos

Esta es una situaciĂłn donde necesitas escribir Fragment explicitamente en lugar de usar la sintaxis <></>. Cuando renderizas mĂșltiples elementos dentro de un bucle, necesitas asignar una key a cada elemento. Si los elementos dentro del bucle son Fragmentos, necesitar usar la sintaxis habitual de un elemento JSX con el fin de proveer el atributo key:

function Blog() {
return posts.map(post =>
<Fragment key={post.id}>
<PostTitle title={post.title} />
<PostBody body={post.body} />
</Fragment>
);
}

Puedes inspeccionar el DOM para verificar que no hay ningun envoltorio alrededor del Fragmento hijo:

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}


Referencia

Fragment

Envuelve elementos en un <Fragment> para agruparlos en situaciones donde necesites un solo elemento. Agrupar elementos en Fragment no tiene efecto en el DOM resultante; ya que quedarĂĄ igual que si los elementos no estuvieran agrupados. La etiqueta JSX vacĂ­a <></> es la abreviatura de <Fragment></Fragment> en la mayorĂ­a de los casos.

Props

  • Opcional key: Los Fragmentos declarados con la sintaxis explĂ­cita <Fragment> pueden tener llaves.

Advertencias

  • Si quisieras pasarle una key a un Fragmento, no podrias usar la sintaxis <>...</>. Tendrias que importar explĂ­citamente Fragment desde 'react' y renderizar <Fragment key={yourKey}>...</Fragment>.

  • React no restablece el estado cuando renderizas desde un <><Child /></> a un [<Child />] y viceversa, o cuando renderizas desde un <><Child /></> a un <Child /> y viceversa. Ten en cuenta de que esto sĂłlo funciona a un nivel de profundidad: por ejemplo, ir desde un <><><Child /></></> a un <Child /> restablece el estado. Échale un ojo a la sintaxis en detalle aquĂ­.