rspec/rules/S6766/javascript/rule.adoc

== Why is this an issue?

If JSX special characters (`>`, `}`) appear unescaped in the element body, this may be either because you simply forgot to escape them or because there is a problem with the JSX tag or expression (for example, misplaced or duplicate closing `>` or `}` brackets).

[source,javascript,diff-id=1,diff-type=noncompliant]
----
<MyComponent
  name="abc"
  foo="bar"> 
  x="y"> {/* Noncompliant: closing > should only be on this line */}
  Body Text
</MyComponent>
----

To fix the issue, check the structure of your JSX tag or expression - are the closing brackets correct and in the right place? If the special character is there on purpose - you need to change it to the appropriate HTML entity.

- replace `>` with ``++&gt;++``
- replace `}` with ``++&#125;++``

[source,javascript,diff-id=1,diff-type=compliant]
----
<MyComponent
  name="abc"
  foo="bar" 
  x="y">
  Body Text
</MyComponent>
----

The characters `<` and `{` should also be escaped, but they are not checked by this rule because it is a syntax error to include those tokens inside of a tag.

== Resources
=== Documentation

* React Documentation - https://react.dev/learn#writing-markup-with-jsx[Writing markup with JSX]
* MDN web docs - https://developer.mozilla.org/en-US/docs/Glossary/Entity[Entity codes]