# E0187: mismatched JSX tags; expected </foo>

In JSX, each opening tag must either be self-closing or have a corresponding closing tag. It is a syntax error for the closing tag to have a different tag name than the opening tag:

    function Section({children}) {
      return <div className="section">{children}</DIV>;
    }

    function SignUpButton() {
      return <div className="button">
        <Link to="/signup">Join <strong>now</Link></strong>
      </div>;
    }

To fix this error, make the ending tag and the opening tag use the same name:

    function Section({children}) {
      return <div className="section">{children}</div>;
    }

Alternatively, swap the incorrectly-nested closing tags:

    function SignUpButton() {
      return <div className="button">
        <Link to="/signup">Join <strong>now</strong></Link>
      </div>;
    }

Introduced in quick-lint-js version 2.0.0.

Documentation for other errors