jsx-fragments.md

Enforce shorthand or standard form for React fragments (react/jsx-fragments)

In JSX, a React fragment is created either with <React.Fragment>...</React.Fragment>, or, using the shorthand syntax, <>...</>. This rule allows you to enforce one way or the other.

Support for fragments was added in React v16.2, so the rule will warn on either of these forms if an older React version is specified in shared settings.

Rule Options

...
"react/jsx-fragments": [<enabled>, <mode>]
...

syntax mode

This is the default mode. It will enforce the shorthand syntax for React fragments, with one exception. Keys or attributes are not supported by the shorthand syntax, so the rule will not warn on standard-form fragments that use those.

The following pattern is considered a warning:

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

The following patterns are not considered warnings:

<><Foo /></>

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

element mode

This mode enforces the standard form for React fragments.

The following pattern is considered a warning:

<><Foo /></>

The following patterns are not considered warnings:

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

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