React/JSX: One way to store an HTML entity as data

For security, React/JSX escapes string data which you try to display {likeThis}. And often, this is what we want.

But I was using the HTML entity  ƒ  as a sign for a fictional unit of money, the "Florin", in a game I was writing and it was all over the place. So I wanted to create a constant for it.

(In case anyone cares,  it's a "Latin Small Letter F With Hook", like this: "ƒ" .)

But if I did:

export const FLORIN_MARK = 'ƒ'

...and then imported it and tried to use it in some JSX like...

{place.fuelPrice} {FLORIN_MARK}

...JSX escaped the characters in the HTML entity so that what finally displayed was "123 ƒ"

I found a couple of possible work-arounds here https://zhenyong.github.io/react/docs/jsx-gotchas.html

But none worked for me.

HOWEVER, since I never had to do any string operations on the HTML entity before displaying it, the constant could just go all the way and be a JSX element. Like this:

import React from 'react'

...

export const FLORIN_MARK = <span>&#402;</span>

And then {FLORIN_MARK} did exactly what I wanted in all the other files.

So instead of fighting against JSX, the answer was to create more JSX. :-)