jsx-shorthand-fragment

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-shorthand-fragment

Full Name in eslint-plugin-react-x

react-x/jsx-shorthand-fragment

Features

🔧 ⚙️

Presets

Rule Details

React fragments can be written using the shorthand syntax <></> instead of <Fragment></Fragment>. This rule enforces using the shorter syntax when possible.

Common Violations

Invalid

import React, { Fragment } from "react";

function MyComponent() {
  return (
    <Fragment>
      <button />
      <button />
    </Fragment>
  );
}

Valid

function MyComponent() {
  return (
    <>
      <button />
      <button />
    </>
  );
}

Rule Options

This rule has a single integer option with the following values:

• 1 (default): Always use shorthand syntax for fragments.
• -1: Never use shorthand syntax for fragments.

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: Fragment

See Also

• jsx-shorthand-boolean
  Enforces shorthand syntax for boolean props