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#

example.jsx3 problems

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

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

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

example.jsxNo problems

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:

example.jsxNo problems

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:

example.jsxwith { "html": false }No problems

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

With component: false, it skips components:

example.jsxwith { "component": false }No problems

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