#jsx-fragments

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-fragments': 'error',
    },
  },
]);

Enforce shorthand or standard form for React fragments.

#Rule Details

In JSX, a React fragment can be written as either <React.Fragment>...</React.Fragment> or as shorthand <>...</>.

Examples of incorrect code for this rule in the default syntax mode:

<React.Fragment>
  <Foo />
</React.Fragment>;

Examples of correct code for this rule in the default syntax mode:

<>
  <Foo />
</>;

<React.Fragment key="key">
  <Foo />
</React.Fragment>;

#Rule Options

The first option is "syntax" (default) or "element".

Examples of incorrect code for this rule with "element":

{ "react/jsx-fragments": ["error", "element"] }

<>
  <Foo />
</>;

Examples of correct code for this rule with "element":

<React.Fragment>
  <Foo />
</React.Fragment>;

Support for fragments was added in React v16.2, so the rule reports either form when an older React version is specified in shared settings.

#Original Documentation

• react/jsx-fragments