Numeric character reference in props not possible due to escaping

[taig]

The HTML numeric character reference / named character reference does not work for prop-values which is a common use case, e.g. for icons fonts (data-icon="ሴ").

It does work for raw strings in this fashion:

<i data-icon="&#xf00f;" />

But breaks in other scenarios:

<i data-icon={'&#x' + code + ';'} />
<i data-icon={'\u0026#x' + code + ';'} />
React.DOM.i( { 'data-icon': '&#x' + code + ';' } )

Yielding:

<i data-icon="&amp;#x1234;" />

The only workaround I found so far is using dangerouslySetInnerHTML, which is a bit unfortunate as it forces me to introduce another wrapper for using a basic HTML feature.

JsFiddle sample

[jabjab]

This is already documented, along with the reasoning and several alternatives other than dangerouslySetInnerHTML: https://facebook.github.io/react/docs/jsx-gotchas.html#html-entities

I'd say just use the Unicode version, which is quite simple as you're already using the hexadecimal version for HTML character references (you may have to pad the code with leading zeros as necessary, of course).

[sophiebits]

You can do

<i data-icon={String.fromCharCode(0xf00f)} />

or if you have it as a string for some reason,

<i data-icon={String.fromCharCode(parseInt('f00f', 16))} />

Only the JSX compiler parses HTML entities; React doesn't so you should use the Unicode character instead.

[antoinejaussoin]

Thanks @spicyj , you saved my life (well, at least a few hours of my time) here

[piotr-cz]

Documentation doesn't mention any way how to use html entities anymore, but solution given by @spicyj still works

[mohas]

I think JSX compilers has gotten smarter and now I can't easily produce meta tags like og:url or og:image in full stack react frameworks like next.js