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 Or         


        

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.

Answer 3

Also using the charset utf-8, try using this library: https://github.com/mathiasbynens/he

import { decode } from 'he';

class Post extends Component { 
  render() {
    <h1>{ decode(this.props.post.title) }</h1>  
  }
}