CODEWITHSUNDEEP
javascriptreactjs
Onilton Maciel
Onilton Maciel

Reputation: 3699

How to render an html entity in React.js without JSX

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "×"),
  document.getElementById('container')
);

Prints '& times;' instead of ×

I was able to fix it by using dangerouslySetInnerHTML, but as the name states, I don't think dangerously is the best possible solution

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close", "dangerouslySetInnerHTML" : {__html: "×"}},
    null),
  document.getElementById('container')
);

You can find the last snippet here:

https://jsfiddle.net/pzb3ygxj/

Upvotes: 8

Views: 10955

Answers (1)

Bo Borgerson
Bo Borgerson

Reputation: 1406

You could use an escaped unicode code point:

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "\u00D7"),
  document.getElementById('container')
);

You can even just use the literal character:

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "×"),
  document.getElementById('container')
);

The HTML entity, in a string, is escaped by React.

There's some documentation here:

https://facebook.github.io/react/docs/jsx-in-depth.html#string-literals

Upvotes: 18

Related Questions