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

Question

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/

Answer 1

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