Ascii/HTML character code doesn't work within React variable

It's pretty easy to see what's going on here by looking at what actually gets rendered:

const checkmark = '𘚤';

ReactDOM.render(<div id="x">{checkmark}</div>,
  document.getElementById('container'));

console.log(document.getElementById('x').innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="container"/>

As you can see, React escapes its output, replacing & with &, just as expected.

The easiest, and correct, solution is to dump the HTML entity and just use the character directly:

class Hello extends React.Component {
  render() {
    var checkmark = '✔';
    return <div>Hello {checkmark}</div>;
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="container"/>

As long as your page's encoding is declared correctly as UTF-8, this will work in all browsers.

https://jsfiddle.net/hLy9xjw1/

Here is a fiddle with two solutions. One is to use the unicode character instead of the ASCII code. Another is to insert the character directly, but make sure your encoding is correct if you want to use the second option. You can also see that they render slightly differently, in Chrome at least.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>

class Hello extends React.Component {
  render() {
    return (
      <div>
        <Solution1 />
        <Solution2 />
      </div>
        )
  }
}

class Solution1 extends React.Component {
  render() {
      var checkmark = '\u2714';  
    return <div>Hello {checkmark}</div>;
    }
}

class Solution2 extends React.Component {
  render() {
      var checkmark =  '✓';  
    return <div>Hello {checkmark}</div>;
    }
}
ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

<span
 dangerouslySetInnerHTML={{ __html: code }}
/>

Simplest implementation is to skip the variable entirely:

...
return (
  <Whatever>{'\u2714'}</Whatever>
);
...

...unless you need it to be a variable for whatever reason :)

Initialize DOM parser

    const parser = new DOMParser();

and use like this to get strings with markups converted to readable text

    label = parser.parseFromString(label,'text/html').body.textContent;