react/self-closing-comp

<Avatar></Avatar> and <Avatar /> render the same thing. The closing tag is extra noise, and it makes you look for children that aren't there.

An element counts as empty if there's nothing between its tags, or only whitespace that includes a line break.

--fix rewrites the element to the self-closing form.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/self-closing-comp" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/self-closing-comp" = ["error", {
  component = true,
  html = true,
}]

Examples#

Reported:

const avatar = <Avatar user={user}></Avatar>;

const spacer = <div className="spacer"></div>;

const list = (
  <UserList users={users}>
  </UserList>
);

Not reported:

const avatar = <Avatar user={user} />;

const spacer = <div className="spacer" />;

const list = <UserList users={users} />;

A space on one line is a child, and so is an expression:

const gap = <span> </span>;

const nonBreaking = <span>&nbsp;</span>;

const space = <span>{" "}</span>;

Options#

Option	Default	What it does
`component`	`true`	Check components, such as `<Avatar>`.
`html`	`true`	Check DOM elements, such as `<div>`.

With html: false, the rule skips DOM elements:

const spacer = <div className="spacer"></div>;

With component: false, it skips components:

const avatar = <Avatar user={user}></Avatar>;