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

Solution 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.

Solution 2

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')
);

Solution 3

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

Comments

[kuujinbo]

If you don't mind using unicode: var checkmark = '\u2714';

[Jordan Running]

They render slightly differently because you're using two different characters. ✓ is U+2713 CHECK MARK; ✔ is U+2714 HEAVY CHECK MARK.

[ecg8]

Ah, makes sense.