Skip to content
Vincle

Loading…

    Fragments

    A fragment groups children without adding a wrapper element: Fragment returns its children unchanged.

    Syntax#

    Two forms are available:

    import { Fragment } from "@vincle/core";
    

    // Long form
    const items = (
      <Fragment>
        <li>One</li>
        <li>Two</li>
      </Fragment>
    );
    

    // Shorthand (requires jsxImportSource in tsconfig)
    const items2 = (
      <>
        <li>One</li>
        <li>Two</li>
      </>
    );

    <>...</> and <Fragment> are the same thing; the long form is there if you prefer it.

    When to use fragments#

    When a component returns several elements and a wrapping <div> would be noise:

    function Breadcrumbs() {
      return (
        <>
          <a href="/">Home</a>
          <span>/</span>
          <a href="/docs">Docs</a>
          <span>/</span>
          <span>Components</span>
        </>
      );
    }

    Where to next#