CODEWITHSUNDEEP
javascriptreactjs
ThreeAccents
ThreeAccents

Reputation: 1882

React JSX parser error

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?

Upvotes: 4

Views: 1121

Answers (2)

zooblin
zooblin

Reputation: 2480

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

in JSX, <MyComponent /> alone is valid while <MyComponent> isn't.

In your case you miss close tag for img. Try to use:

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

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

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
  }
});

Upvotes: 7

Related Questions