Use Greater‑Than and Less‑Than Symbols in JSX
Putting the less than (<) or greater than (>) symbols into the JSX of your React app should be very straightforward. Even as a front‑end developer with over a decade of experience, it took me longer than I should admit to work the solution out...
<> <p>{'<'} - less than</p> <p>{'>'} - more than</p></>It makes perfect sense: in JSX, the curly braces inform the JSX parser that the contents should be interpreted as JavaScript, the quotes then define a string, so whatever is within the quotes will simply be parsed and output as‑is.
You could ‑ of course ‑ simply use the HTML/XML escape codes:
<> <p>< - less than</p> <p>> - more than</p></>The same approach can be used to output more or less any special characters:
<> <p>® is the same as {'®'}</p> <p>© is the same as {'©'}</p> <p>™ is the same as {'™'}</p></>One thing of note though: this same technique cannot be used to output HTML comments, for that you need an altogether different approach.
{'<!-- This will not be rendered as an HTML comment! -->'}Fin.
Postscript
June 2026: this is a tiny JSX gotcha note, kept because the parser confusion is easy to hit. For anything beyond literal characters in rendered copy, I would now make the surrounding component intent clearer rather than relying on a clever escape.