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>&lt; - less than</p>
  <p>&gt; - more than</p>
</>

The same approach can be used to output more or less any special characters:

<>
  <p>&reg; is the same as {'®'}</p>
  <p>&copy; is the same as {'©'}</p>
  <p>&trade; 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.