# react/jsx-closing-bracket-location

> Enforce where the closing bracket of a multiline JSX tag goes

When a JSX tag's props are spread over several lines, the closing `>` or `/>` can end up in several places. This rule keeps it in one. By default the bracket goes on its own line, in the same column as the `<` that opens the tag.

If the tag has no props, or the tag and its last prop are on one line, the bracket must be on that line too, no matter what the options say.

`--fix` moves the bracket.

{/* 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/jsx-closing-bracket-location" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
# "after-props", "props-aligned", "tag-aligned" or "line-aligned"
"react/jsx-closing-bracket-location" = ["error", "tag-aligned"]
```

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

## Examples

Reported:

{/* bad */}
```jsx
const button = (
  <Button
    label="Save"
    onClick={save} />
);
```

{/* bad {"count": 2} */}
```jsx
const button = (
  <Button label="Save"
  />
);

const divider = (
  <Divider
  />
);
```

Not reported:

{/* good */}
```jsx
const button = (
  <Button
    label="Save"
    onClick={save}
  />
);

const small = <Button label="Save" />;
```

## Options

```toml bunfig.toml
[lint.rules]
"react/jsx-closing-bracket-location" = ["error", "line-aligned"]
```

| Option | Where the bracket goes |
| --- | --- |
| `"tag-aligned"` (default) | On its own line, in the same column as the opening `<`. |
| `"line-aligned"` | On its own line, indented like the line that has the opening `<`. |
| `"props-aligned"` | On its own line, in the same column as the last prop. |
| `"after-props"` | On the same line as the last prop. |

`"line-aligned"` differs from `"tag-aligned"` when the tag doesn't start its line:

{/* good {"options": ["line-aligned"]} */}
```jsx
const button = <Button
  label="Save"
  onClick={save}
/>;
```

{/* bad {"options": ["tag-aligned"]} */}
```jsx
const button = <Button
  label="Save"
  onClick={save}
/>;
```

{/* good {"options": ["props-aligned"]} */}
```jsx
const button = (
  <Button
    label="Save"
    onClick={save}
    />
);
```

{/* good {"options": ["after-props"]} */}
```jsx
const button = (
  <Button
    label="Save"
    onClick={save} />
);
```

`{ "location": "line-aligned" }` means the same as `"line-aligned"`. An object can also give each kind of tag its own location:

| Option | Default | What it does |
| --- | --- | --- |
| `selfClosing` | `"tag-aligned"` | The location for tags that end in `/>`. `false` turns the check off for them. |
| `nonEmpty` | `"tag-aligned"` | The location for tags that have a closing tag. `false` turns the check off for them. |

{/* good {"options": [{"selfClosing": "after-props", "nonEmpty": "tag-aligned"}]} */}
```jsx
const form = (
  <Form
    onSubmit={save}
  >
    <Button
      label="Save" />
  </Form>
);
```

## When not to use it

A formatter such as `bun fmt` or Prettier already decides where the bracket goes.