36 lines
1.2 KiB
Plaintext
36 lines
1.2 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
|
|
|
|
* https://react.dev/learn#writing-markup-with-jsx[React - Writing markup with JSX]
|
|
* https://developer.mozilla.org/en-US/docs/Glossary/Entity[MDN - Entity codes] |