react/jsx-fragments

<>...</> and <React.Fragment>...</React.Fragment> do the same thing. Mixing them makes readers wonder if there's a difference. By default the rule asks for the short form.

A fragment with a prop such as key is never reported, because the short form can't take props. A plain <Fragment> counts if Fragment comes from "react" or from React.

--fix rewrites the fragment to the other form.

Configure

Off by default. To turn it on:

[lint.rules]
"react/jsx-fragments" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/jsx-fragments" = ["error", "syntax"] # "syntax" or "element"

Examples

Reported:

import React, { Fragment } from "react";

const name = (
  <React.Fragment>
    <First />
    <Last />
  </React.Fragment>
);

const address = (
  <Fragment>
    <Street />
    <City />
  </Fragment>
);

Not reported:

import React from "react";

const name = (
  <>
    <First />
    <Last />
  </>
);

const rows = users.map(user => (
  <React.Fragment key={user.id}>
    <dt>{user.name}</dt>
    <dd>{user.email}</dd>
  </React.Fragment>
));

Options

const name = (
  <>
    <First />
    <Last />
  </>
);

import React from "react";

const name = (
  <React.Fragment>
    <First />
    <Last />
  </React.Fragment>
);