CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Shai UI
Shai UI

Reputation: 51918

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

Upvotes: 15

Views: 19399

Answers (5)

Petr Zelenka
Petr Zelenka

Reputation: 21

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;

Upvotes: 0

Gifford N.
Gifford N.

Reputation: 429

Simplest implementation is to skip the variable entirely:

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

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

Upvotes: 1

BaHaa Jr.
BaHaa Jr.

Reputation: 534

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

Upvotes: 2

ecg8
ecg8

Reputation: 1392

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

Upvotes: 4

Jordan Running
Jordan Running

Reputation: 106027

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.

Upvotes: 8

Related Questions