d3cfe19d7e
Co-authored-by: Marco Borgeaud <89914223+marco-antognini-sonarsource@users.noreply.github.com>
37 lines
1.3 KiB
Plaintext
37 lines
1.3 KiB
Plaintext
== 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 ``++>++``
|
|
- replace `}` with ``++}++``
|
|
|
|
[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]
|