The issue is raised because of missing or unescaped JSX escape characters. These characters would be injected as a text node in JSX statements, which might not be intentional. These won't throw any syntax or runtime errors, but the rendered output will not be the same as expected.

For example, if one were to misplace their closing bracket (>) in a tag:

<MyComponent
  name="name"
  type="string"
  color="red">  {/* oops! */}
  x="y">
  Body Text
</MyComponent>

The body text of this would render as in the following example:

x="y">
Body Text

The above output is probably not what was intended. This issue requires that these particular JSX characters (example >, {, } ) are escaped if they appear in the body of a tag.

Another example is when one accidentally includes an extra closing brace.

<MyComponent>{'Text'}}</MyComponent>

The extra brace will be rendered, and the body text will be as below example:

Text}

This issue also checks for " and ', which might be accidentally included when the closing bracket (>) is in the wrong place.

<MyComponent
  a="b">  {/* oops! */}
  c="d"
  Intended body text
</MyComponent>

The preferred way to include one of these characters is to use the HTML escape code.

• > can be replaced with &gt;
• " can be replaced with &quot;, &ldquo;, " or ”
• ' can be replaced with &apos;, ‘, ' or ’
• } can be replaced with &#125;

Alternatively, you can include the literal character inside a subexpression (such as <div>{'>'}</div>)

The characters < and { should also be escaped because it will be considered as an error to include those tokens inside a tag.

Bad Practice

<div> > </div>

<div>Multiple errors: '>> text </div>

Recommended

<div> &gt; </div>

<div> {'>'} </div>