How to render accents in ReactJs?

Question

I'm trying render an element which has an accent character using ReactJS and JSX, but it's not returning what I wanted.

My JSX:

var Orcamento = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Orçamento</h1>

            </div>
        );
    }
});

React.render(
    <Orcamento/>,
    document.getElementById("orcamento")
);

My rendered javascript:

var Orcamento = React.createClass({displayName: "Orcamento",
    render: function() {
        return (
            React.createElement("div", null, 
                React.createElement("h1", null, "Orçamento")

            )
        );
    }
});

React.render(
    React.createElement(Orcamento, null),
    document.getElementById("orcamento")
);

And my result in browser:

Orçamento

I've set <meta charset="UTF-8"> in my index file inside the head tag, accent characters works in page title and body if this word is typed direct in page content, but is not working when it's rendered by ReactJs

How can I fix this problem?

Answer 1

I resolved! the problem is because I'm compiling JSX using gulp, and file generated is not UTF-8, so I save as file in UTF-8 that is working!

Answer 2

What you see, Orçamento, it's a result of a UTF-8 byte array being rendered in ASCII, probably codepage ISO 8859-1.

ReactJS doesn't support non-ASCII characters within HTML.

Try this:

var Orcamento = React.createClass({
    render: function() {
        return (
            <div>
                <h1> { 'Orçamento' } </h1>

            </div>;
        );
    }
});

Or simply replace orçamento by Orçamento.

This is well explained in the JSX gotchas.