React JSX parser error

Question

I'm trying to learn React but this is making me get stuck:

    <script type="text/jsx">
        var Avatar = React.createClass({
            render: function(){
                return {
                    <div>
                        <img src={this.props.path}>
                    </div>
                }
            }
        });

        React.render(<Avatar path="img"/>, document.body);       
    </script>

I keep getting this error:

Uncaught Error: Parse Error: Line 5: Unexpected token <
    at http://localhost:420/

<div>
^

I've tried wrapping it in another div or a span but nothing worked what am I doing wrong?

Answer 1

You should return the JSX, but you are returning an object, which cannot contain JSX.

var Avatar = React.createClass({
  render: function(){
    return ( // note a parenthesis, not a brace 
      <div>
        <img src={this.props.path}>
      </div>
    ); // same
  }
});