CODEWITHSUNDEEP
htmlreactjs
Johnnny
Johnnny

Reputation: 3

Understanding render error in React

This is my first experience with react. I don't understand why the following code returns an error on the render function.

    var LikeButton = React.createClass({
        getInitialState: function() {
            return { liked: false };
        }

        render: function() {
            if (this.state.liked)
                return <div>Ti piace!</div>
            else
                return <a href="#" onClick={this.doLike}>Mi piace</a>
        }

        doLike: function() {
            this.setState({ liked: true });
        }
    });
    ReactDOM.render(<LikeButton />, document.body);

This code is in tag <script type = "text/babel">.

Upvotes: 0

Views: 53

Answers (3)

Jalissa
Jalissa

Reputation: 876

React.createClasstakes an object as a parameter, and every property of an object needs to be separated by a comma (,).

You just need to do this:

var LikeButton = React.createClass({
    getInitialState: function() {
        return { liked: false };
    }, // comma

    render: function() {
        if (this.state.liked)
            return <div>Ti piace!</div>
        else
            return <a href="#" onClick={this.doLike}>Mi piace</a>
    }, // comma

    doLike: function() {
        this.setState({ liked: true });
    }
});
ReactDOM.render(<LikeButton />, document.body);

You can see your code working on this fiddle.

Upvotes: 0

Johnnny
Johnnny

Reputation: 3

The error is the following:

Uncaught SyntaxError: embedded: Unexpected token (7:3)
   5 |          }
   6 |  
>  7 |          render: function() {
     |    ^
   8 |              if (this.state.liked)
   9 |                  return <div>Ti piace!</div>
  10 |              else
    at Parser.pp.raise (browser.js:65620)
    at Parser.pp.unexpected (browser.js:66850)
    at Parser.pp.expect (browser.js:66844)
    at Parser.pp.parseObj (browser.js:65244)
    at Parser.pp.parseExprAtom (browser.js:65040)
    at Parser.parseExprAtom (browser.js:68226)
    at Parser.pp.parseExprSubscripts (browser.js:64884)
    at Parser.pp.parseMaybeUnary (browser.js:64865)
    at Parser.pp.parseExprOps (browser.js:64811)
    at Parser.pp.parseMaybeConditional (browser.js:64793)

Upvotes: 0

iofjuupasli
iofjuupasli

Reputation: 3873

It seems that while you provided babel in script type, it doesn't mean that your code actually compiled.

You can try Create React App utility to setup valid environment for React development.

Upvotes: 1

Related Questions