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