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

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 = '&#10004;';
<div>{str}</div>

it doesn't. It shows up as &#10004;

any ideas?

class Hello extends React.Component {
  render() {
    var checkmark = '&#10004;';
  
    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"/>
javascripthtmlreactjsjsx


Solution 1:[1]

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

const checkmark = '&#100004;';

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 &amp;, 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:[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:[3]

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

Solution 4:[4]

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;

Solution 5:[5]

Simplest implementation is to skip the variable entirely:

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ecg8
Solution 3 BaHaa Jr.
Solution 4 Petr Zelenka
Solution 5 Gifford N.

Related Questions