# react/self-closing-comp

> Require elements without children to be self-closing

`<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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 3} */}
```jsx
const avatar = <Avatar user={user}></Avatar>;

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

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

Not reported:

{/* good */}
```jsx
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:

{/* good */}
```jsx
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:

{/* good {"options": [{"html": false}]} */}
```jsx
const spacer = <div className="spacer"></div>;
```

With `component: false`, it skips components:

{/* good {"options": [{"component": false}]} */}
```jsx
const avatar = <Avatar user={user}></Avatar>;
```