Wali faizy Wali faizy - 2 months ago 10
React JSX Question

Unexpected token with ReactJS

I am making a component with jsx but get this error


Uncaught SyntaxError: embedded: Unexpected token (5:20)


<div id="example"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return {
<h1>Hello World</h1>
}
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('example')
);
</script>

Answer

Your return has invalid sintax.

You can either just return the JSX string like in the example bellow, or use () to encapsule JSX. Curly bracets is wrong sintax.

var HelloWorld = React.createClass({
    render: function() {
        return <h1>Hello World</h1>
    }
});

jsFiddle: https://jsfiddle.net/juzkL6vr/