react/no-adjacent-inline-elements

Two inline elements such as <a> or <span> that touch in the source render with nothing between them, so their text runs together on the page, like "Log inSign up".

The rule knows HTML's inline elements, including a, b, button, code, em, i, img, input, label, select, small, span, strong and textarea. It also checks an array of children passed to React.createElement.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/no-adjacent-inline-elements" = "error" # or "warn"

Examples#

Reported:

const nav = (
  <div>
    <a href="/login">Log in</a><a href="/signup">Sign up</a>
  </div>
);

const nav = React.createElement("div", undefined, [
  React.createElement("a", { href: "/login" }, "Log in"),
  React.createElement("a", { href: "/signup" }, "Sign up"),
]);

Not reported:

const nav = (
  <div>
    <a href="/login">Log in</a> <a href="/signup">Sign up</a>
  </div>
);

Elements on separate lines aren't reported, even though JSX drops the line break and renders nothing between them. Write {" "} at the end of the line if you want a space there:

const joined = (
  <div>
    <a href="/login">Log in</a>
    <a href="/signup">Sign up</a>
  </div>
);

const spaced = (
  <div>
    <a href="/login">Log in</a>{" "}
    <a href="/signup">Sign up</a>
  </div>
);