Escape A Quote Written In JSX Text
ID |
javascript.jsx_unescaped_entities |
Severity |
info |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Code Smell |
Language |
JavaScript |
Tags |
code-smell, jsx |
Rationale
JSX text is markup, and a quote character in markup is ambiguous: the reader cannot tell an intended quotation mark from an attribute delimiter that ended up in the wrong place, and a later edit that moves the text into an attribute or into a string silently changes what it means.
Writing the entity — ", ', “ — or moving the text into a braced string
expression says which was meant, and survives being moved.
The characters between two tags arrive as one text token holding the prose verbatim, so the check
reads that token and not the file’s source. The one character it covers is the quote, because that
is the one the grammar lets through: a raw > closes the element and a raw } closes the child
expression, so either spelling fails the parse of the whole file and never reaches a detector — a
rule reporting them would be reporting on files it never sees. That is also the pair that appears in
real prose.
<p>say "hi"</p> // FLAW - a raw double quote
<p>it's Ada's</p> // FLAW - raw single quotes
<p>say "hi"</p> // OK - an entity
<p>it's Ada's</p> // OK
<p>{'say "hi"'}</p> // OK - a string expression, not markup
<p>plain text</p> // OK
Remediation
Replace the character with its entity: " or the typographic “ / ” for a
double quote, ' or ’ for an apostrophe. Or move the run of text into a braced string
expression, where a quote is just a character — which is the better answer for a longer passage, and
the natural one when the text already comes from a translation catalogue.