Rules
avoid-shorthand-fragment

prefer-shorthand-fragment

Rule category

Style.

What it does

Enforces the usage of fragment shorthand syntax.

Examples

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return (
    <>
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
    </>
  );
}

Passing

import React, { 
const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx import { Fragment } from 'react'; <Fragment> <td>Hello</td> <td>World</td> </Fragment> ```@example```tsx // Using the <></> shorthand syntax: <> <td>Hello</td> <td>World</td> </> ```
Fragment
} from "react";
function function Example(): React.JSX.ElementExample() { return ( <
const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx import { Fragment } from 'react'; <Fragment> <td>Hello</td> <td>World</td> </Fragment> ```@example```tsx // Using the <></> shorthand syntax: <> <td>Hello</td> <td>World</td> </> ```
Fragment
>
<JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button /> <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button /> </
const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx import { Fragment } from 'react'; <Fragment> <td>Hello</td> <td>World</td> </Fragment> ```@example```tsx // Using the <></> shorthand syntax: <> <td>Hello</td> <td>World</td> </> ```
Fragment
>
); }