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

Question

I have the ascii/html code of a checkmark: ✔

✔

In react if I go:

<div>&#10004;</div>

then it works. but if I go

var str = '✔';
<div>{str}</div>

it doesn't. It shows up as ✔

any ideas?

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"/>

Answer 1

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.