#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.

A file-level @jsx annotation selects the JSX factory for that file and takes precedence over settings.react.pragma. For example, /** @jsx Preact.h */ makes the long fragment form Preact.Fragment. The fragment member name can still be configured separately with settings.react.fragment.

#Original Documentation

• eslint-plugin-react: jsx-fragments
• Source code