CODEWITHSUNDEEP
javascriptreactjs
user8079593
user8079593

Reputation:

Parse Error: Line 9: Unexpected identifier in react

What is error in this, i am simply following the new boston tutorial and while doing this i don't know why this error is coming

I edited the code now, it still not working

Code:

<!Doctype html>
<html>
    <head>
        <title>React Practice</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    </head>
    <body>
        <script type="text/jsx">
             class Basics extends React.Component {
            constructor () {
                super();
                this.state = {checked: true}
            }
            render(this.state.checked) {
                var msg;
                if () {
                    msg = 'checked';
                } else {
                    msg = 'unchecked';
                }
                return (
                    <div>
                        <input type="checkbox" />
                        <h2>Checkbox is {msg}</h2>
                    </div>
                ) 
            }
        }
        ReactDOM.render(<Basics />, document.getElementById('example'));
        </script>  
        <div id="example"></div>
    </body>

Upvotes: 2

Views: 398

Answers (1)

Radek Anuszewski
Radek Anuszewski

Reputation: 1910

Quite weird for me, I would write it as follows:

            getInitialState() {
                return {checked:true}
            }
            render() {
                var msg;
                if (this.state.checked) {
                    msg = 'checked';
                } else {
                    msg = 'unchecked';
                }
                return (
                    <div>
                        <input type="checkbox" />
                        <h2>Checkbox is {msg}</h2>
                    </div>
                ) 
            }
        }

You had empty if(), and render() should not take any params, I don't know why you use msg: checked instead of msg = 'checked' (maybe some JS transpiler which I didn't see before). I would also move initial state to constructor:

constructor () {
    super();
    this.state = {checked: true}
}

and remove getInitialState() method. Outside constructor, you should always use setState() method. And, as you pointed out in comments section, you should not use comma after method declaration, it is needed in object declaration but forbidden in ES 6 class declaration.

Upvotes: 1

Related Questions