Skip to content

Require shorthand form for JSX fragments (react/jsx-fragments) #1364

@feross

Description

@feross

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.

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

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md

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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Done

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions