CODEWITHSUNDEEP
javascriptreactjs
Dheerendra
Dheerendra

Reputation: 1568

ReactJS error in syntax at render function

I wrote a react class but Chrome is throwing a syntax error in the render function.

I'm attaching the code here:

var Chatrooms = React.createClass({

    getInitialState: function() {
        return {
            loaded: false,
            pages: undefined,
            id: "-1",
        };
    },

    loadPages: function() {
        url = "/chat/api/chatroom/" + this.props.course + "/get/?format=json";
        request = ajax_json_request(url, "GET", {});
        request.done(function(response) {
            response = jQuery.parseJSON(response);
            oldState = this.state;
            oldState['chatrooms']=response;
            oldState['loaded']=true;
            this.setState(oldState);
        }.bind(this));
    },

    componentDidMount: function() {
        if(!this.state.loaded) {
            this.loadPages();
        }
    },

    render: function(){
        console.log(this.state.chatrooms);
        return (
                <div></div>
            );
    }

});

Browser is showing the error in line <div></div> as Uncaught SyntaxError: Unexpected token <. I checked the syntax online and it looks good to me.

Upvotes: 0

Views: 312

Answers (2)

Ranveer
Ranveer

Reputation: 6863

Try adding the JSX pragma on the top of the JSX file:

/** @jsx React.DOM */

This is tells the browser to use the JSX directive.

Upvotes: 1

Dhiraj
Dhiraj

Reputation: 33618

You must have used <script type="text/javascript"> instead of <script type="text/jsx">

Upvotes: 1

Related Questions