prefer-shorthand-fragment
Rule category
Style.
What it does
Enforces the usage of <></>
over <React.Fragment></React.Fragment>
.
Why is this good?
<></>
is shorter and more readable. And it does not require importing React
or the Fragment
component.
Examples
Failing
import React, { const Fragment: ExoticComponent<{
children?: ReactNode | undefined;
}>
Lets you group elements without a wrapper node.Fragment } from "react";
function function Example(): React.JSX.Element
Example() {
return (
<const Fragment: ExoticComponent<{
children?: ReactNode | undefined;
}>
Lets you group elements without a wrapper node.Fragment>
<JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button />
<JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button />
</const Fragment: ExoticComponent<{
children?: ReactNode | undefined;
}>
Lets you group elements without a wrapper node.Fragment>
);
}
Passing
import React from "react";
function function Example(): React.JSX.Element
Example() {
return (
<>
<JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button />
<JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button />
</>
);
}