Parse Error: Line 9: Unexpected identifier in react

Admin 1
Viewed 371

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>
reactjs javascript
1 Answers

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.

user_33684980
Related