prefer-shorthand-fragment

Full Name in eslint-plugin-react-x

react-x/prefer-shorthand-fragment

Full Name in @eslint-react/eslint-plugin

@eslint-react/prefer-shorthand-fragment

Features

🔍

What it does

Enforces the use of shorthand syntax for fragments.

Examples

Failing

import React, { Fragment } from "react";
 
function Example() {
  return <Fragment><button /><button /></Fragment>;
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  //       - Use fragment shorthand syntax instead of 'Fragment' component.
}

Passing

import React from "react";
 
function Example() {
  return <><button /><button /></>;
}

prefer-shorthand-boolean no-children-in-void-dom-elements