JSX parser error response

Question

I'm trying to learn React, but it makes me 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 tried wrapping it in another div or span but nothing worked, what am I doing wrong?

Answer 1

You must return JSX, but you are returning an object that cannot contain JSX.

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

Answer 2

In React, all tags must be closed, according to this ,

in JSX, only <MyComponent />valid, but <MyComponent>not.

In your case, you will skip the close tag for img. Try using:

<img src={this.props.path} />