React Javascript displaying/decoding unicode characters

If you have to work with strings that have, for whatever reason, literally those \u.... codes in them instead of being real letters, convert them to numbers, and then use String.fromCharCode() to turn those numbers into real letters. We can use a regexp replace with handler function for this:

function convertUnicode(input) {
  return input.replace(/\\u[0-9a-fA-F]{4}/g,function(a,b) {
    var charcode = parseInt(b,16);
    return String.fromCharCode(charcode);
  });
}

var Hello = React.createClass({
  getInitialState: function() {
    return {
      name: convertUnicode(this.props.name)
    };
  },
  render: function() {
    return <div>Hello {this.state.name}</div>;
  }
});

React.render(
  <Hello name="Informaci\u00f3n" />,
  document.getElementById('container')
);

Fiddle: https://jsfiddle.net/cq7o4zgb/

React converts unicode automatically with the dangerouslySetInnerHTML attribute.

See for more info: https://reactjs.org/docs/dom-elements.html

export default class Hello extends Component {

render() {
    return (
        <div>
            <div dangerouslySetInnerHTML={{ __html: this.props.name}}></div>
        </div>
    );
  }
}

Just pass it as a JS string:

<Hello name={'Informaci\u00f3n'} />

No need to do any manual processing (which is error prone).

Fiddle: https://jsfiddle.net/dddf7o70/5/