How to render HTML entity in React without dangerouslySetInnerHTML? - html

Question

I'm using custom fonts in my site, similar to Font Awesome, which have simple signature:
<i className="icon-plus"></i>
But I want to create own component which will be render dynamic HTML entities like:
const iconEntity = '' // (Font Awesome HTML entity example)
const icon1 = '' // dynamic entities
class OwnIcon extends React.Component {
render() {
return <i>{iconEntity}</i>
}
}
But this doesn't work. After reading this post I trier using dangerouslySetInnerHTML and it works, e.g.:
const iconEntity = ''
class OwnIcon extends React.Component {
render() {
return <i className="icon" dangerouslySetInnerHTML={{__html: iconEntity }}></i>
}
}
But it's a little bit ugly solution.
After reading JSX gotchas I found that there are solutions like:
A safer alternative is to find the unicode number corresponding to the entity and use it inside of a JavaScript string:
<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
But how I could convert(for example, Font Awesome) Unicode Private-Use characters "\f007" or HTML hex entity&#xf007 to get unicode number to get rid of dangerouslySetInnerHTML and render icons in more "clear" way?
Text examples: here

Answer 1

Put it in a Fragment so the value becomes JSX, and will be output as HTML:
const iconEntity = <Fragment></Fragment>
class OwnIcon extends React.Component {
render() {
return <i className="icon">{iconEntity}</i>
}
}
The downside to this, of course, is that you don't get to say "Let's get dangerous!" like Darkwing Duck. ;)