CODEWITHSUNDEEP
javascriptreactjs
Stevik
Stevik

Reputation: 1152

ReactJS - Uncaught Error: Parse Error: Line 27: Unexpected token

I'm getting this error

Uncaught Error: Parse Error: Line 27: Unexpected token .

Seems like there shouldn't be a "." after this

How can I fix it ?

Here is my whole code

var PageHandler = React.createClass({
    getInitialState: function() {
        return {
            page: ''
        };
    },

    render: function(){
        return(
            {this.state.page == '' && <MainPage />} // THIS IS LINE 27
        );
    }

});

var MainPage = React.createClass({
    render: function(){
        return(
            <div className="main-page">
              <a href="javascript:void(0);">Open</a>
            </div>
        );
    }
});

And this is in my .html file

 <script type="text/jsx">
    //var PageHandler = React.createElement(PageHandler);
    //React.render(PageHandler, document.body);
    React.render(<PageHandler />, document.body);
    </script>

EDIT And now I found out that if I add <div>...</div> it's working.

render: function(){
        return(
            <div>
            {this.state.page == '' && <MainPage />}
            </div>
        );
    }

Why is it so ?

Upvotes: 0

Views: 2385

Answers (1)

James Waddington
James Waddington

Reputation: 2905

The render method in react must return a single parent element. When you think about what it will compile the jsx to, it's easier to see why it's having a hard time. createElement takes these arguments:

createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

So your MainPage will compile to:

return(
            React.createElement("div", {className: "main-page"}, 
              React.createElement("a", {href: "javascript:void(0);"}, "Open")
            )

It can easily see that it creates a div, props are just the class name, child is an a.

But looking at 

{this.state.page == '' && <MainPage />}

What will that compile to? What will the first parameter be? It doesn't have a clear type for the element it's going to create. When you wrap it all in a div, it does and it will compile to this:

React.createElement("div", null, 
            this.state.page == '' && React.createElement(MainPage, null), " // THIS IS LINE 27"
)

Of course, that may not be what you intend it to do but hopefully it shows what React is trying to do.

Upvotes: 2

Related Questions