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

Question

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

&#10004;

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 ✔

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

worst case, you can use [dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) — Ted, Jan 04 '18 at 21:53
@foreyez That's what the "Copy snippet to answer" button is for. — Jordan Running, Jan 04 '18 at 22:06
If you don't mind using unicode: `var checkmark = '\u2714';` — kuujinbo, Jan 04 '18 at 22:15
Check the answer of @Mhmdrz_A given for question: https://stackoverflow.com/questions/61347372/adding-a-title-attribute-line-break-using-10-to-a-jsx-element — Germán Mendoza, Oct 13 '21 at 16:09
Check the answer given by @Mhmdrz_A in https://stackoverflow.com/questions/61347372/adding-a-title-attribute-line-break-using-10-to-a-jsx-element — Germán Mendoza, Oct 13 '21 at 16:11
Check the answer given by @Mhmdrz_A in https://stackoverflow.com/questions/61347372/adding-a-title-attribute-line-break-using-10-to-a-jsx-element — Germán Mendoza, Oct 13 '21 at 16:13

Jordan Running · Answer 1 · 2018-01-04T22:13:54.480

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 &, 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.

score 4 · Answer 2 · answered Jan 04 '18 at 22:16

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

They render slightly differently because you're using two different characters. `✓` is [U+2713 CHECK MARK](https://www.fileformat.info/info/unicode/char/2713/index.htm); `✔` is [U+2714 HEAVY CHECK MARK](https://www.fileformat.info/info/unicode/char/2714/index.htm). — Jordan Running, Jan 04 '18 at 22:19

score 2 · Answer 3 · answered Jan 16 '19 at 07:27

2

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

answered Jan 16 '19 at 07:27

BaHaa Jr.

534
1
7
19

score 0 · Answer 4 · answered Mar 01 '22 at 00:56

0

Simplest implementation is to skip the variable entirely:

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

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

answered Mar 01 '22 at 00:56

Gifford N.

412
5
13

score 0 · Answer 5 · answered May 27 '22 at 14:44

0

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;

answered May 27 '22 at 14:44

Petr Zelenka

11
1

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

5 Answers5