JSX dismiss an arrow (>) in HTML

Question

In normal javascript, I can easily add an arrow like:

<button>Next > </button> 

but I try that is JSX, the arrow will be ignored/dismissed. Hmm is there any way I can enable that?

Answer 1

Because JSX works directly with HTML so you would need to use HTML symbol codes for reserved letters.

You could use

<button>Next &gt; </button>

or

<button>Next &#62; </button>

Check out the full list here: http://www.ascii.cl/htmlcodes.htm

Answer 2

If you want a > output you should HTML encode this as &gt

<button>Next &gt </button>