Parsing error: Unexpected token, expected ";"

Question

I checked if I had unclosed tags, parens and curly braces. No issue there to me.

I set up my node and react environment and have localhost:3000 up and running. No issue here to me.

But I don't know where to look anymore. Any idea, please? Thanks for your help.

class App extends React.Component {
constructor(props) {
    super(props);
        this.state = {
            addLevel1Num1: 1,
            addLevel1Num2: 1,
            subLevel1Num1: 1,
            subLevel1Num2: 1,
            addLevel2Num1: 1,
            addLevel2Num2: 1,
            subLevel2Num1: 20,
            subLevel2Num2: 20,
            response: "",
            incorrect: false,
            score: 0,
                // scoreSubLevel1: 3
        };
    }
}


class ProblemAddLevel1 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.addLevel1Num1} + {this.state.addLevel1Num2} = <input onKeyPress={this.inputKeyPressAddLevel1} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineAddLevel1} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                </div>
           </div>
        ); 
    }
}

.... similar code as above skipped.

render() {
    if (this.state.score < 3) {
        return <ProblemAddLevel1 />;
    }
    if (this.state.score < 6) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score < 9) {
        return <ProblemAddLevel2 />;
    }
    if (this.state.score < 15) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score === 15) {
        return <WinRace />;
    }
}

....

ReactDOM.render((
    <div>
        <App />
        <ProblemAddLevel1 />
        <ProblemSubLevel1 />
        <ProblemAddLevel2 />
        <ProblemSubLevel1 />
        <WinRace />
    </div>
), document.querySelector("#app"));

I get this error in the browser:

Failed to compile

./src/App.js
  Line 109:  Parsing error: Unexpected token, expected ";"

  107 | 
  108 | 
> 109 | render() {
      |          ^
  110 |     if (this.state.score < 3) {
  111 |         return <ProblemAddLevel1 />;
  112 |     }

This error occurred during the build time and cannot be dismissed.

I REWORKED ON THIS ISSUE TODAY LOOKING FOR FIXES AND GOT SOMETHING ELSE:

APP.JS

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './index.js';
import './index.css';

class App extends React.Component {
    constructor(props) {
        super(props);
            this.state = {
                addLevel1Num1: 1,
                addLevel1Num2: 1,
                subLevel1Num1: 1,
                subLevel1Num2: 1,
                addLevel2Num1: 1,
                addLevel2Num2: 1,
                subLevel2Num1: 20,
                subLevel2Num2: 20,
                response: "",
                incorrect: false,
                score: 0,
                // scoreSubLevel1: 3
            };
        }

    render() {
        if (this.state.score < 3) {
            return <ProblemAddLevel1 />;
        }
        if (this.state.score < 6) {
            return <ProblemSubLevel1 />;
        }
        if (this.state.score < 9) {
            return <ProblemAddLevel2 />;
        }
        if (this.state.score < 15) {
            return <ProblemSubLevel1 />;
        }
        if (this.state.score === 15) {
            return <WinRace />;
        }
    }
    default export App;
}


class ProblemAddLevel1 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.addLevel1Num1} + {this.state.addLevel1Num2} = <input onKeyPress={this.inputKeyPressAddLevel1} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineAddLevel1} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                </div>
           </div>
        );
    }
}



class ProblemSubLevel1 extends React.Component {
    render() {
        return (
        <div>
            <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
            <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
            {this.state.subLevel1Num1} - {this.state.subLevel1Num2} = <input onKeyPress={this.inputKeyPressSubLevel1} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
            Score: {this.state.score} <button onClick={this.resetLineSubLevel1} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
            <img id="green-leaf" src={'./green-leaf.svg'} />
            </div>
       </div>
       );
    }
}


class ProblemAddLevel2 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.addLevel2Num1} + {this.state.addLevel2Num2} = <input onKeyPress={this.inputKeyPressAddLevel2} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineAddLevel2} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
               <img id="green-leaf" src={'./green-leaf.svg'} />
               <img id="green-leaf" src={'./green-leaf.svg'} />
               </div>
           </div>
        );
    }
}


class ProblemSubLevel2 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.subLevel2Num1} - {this.state.subLevel2Num2} = <input onKeyPress={this.inputKeyPressSubLevel2} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineSubLevel2} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                </div>
            </div>
        );
    }
}


class WinRace extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Well done! You won the Four Green Leaves Title!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                Score: {this.state.score}
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <h2 id="mainTitle">Come back to review your maths in a few days!</h2>
                <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                </div>
            </div>
        );
    }
}


updateResponse = (event) => {
    this.setState({ response: event.target.value });
}

inputKeyPressAddLevel1 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.addLevel1Num1 + this.state.addLevel1Num2) {
            this.setState(state => ({
                addLevel1Num1: Math.ceil(Math.random() * 10) + state.score,
                addLevel1Num2: Math.ceil(Math.random() * 10) + state.score,
                // subLevel1Num1: Math.ceil(Math.random() * 10) + state.scoreSubLevel1,
                // subLevel1Num2: Math.ceil(Math.random() * 10) + state.scoreSubLevel2,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                 response: "",
                 incorrect: true
            });
        }
    }
}


inputKeyPressSubLevel1 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.subLevel1Num1 - this.state.subLevel1Num2) {
            this.setState(state => ({
                subLevel1Num1: Math.ceil(Math.random() * 10) + state.score,
                subLevel1Num2: Math.ceil(Math.random() * 10) + state.score,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                response: "",
                incorrect: true
            });
        }
    }
}


inputKeyPressAddLevel2 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.addLevel2Num1 + this.state.addLevel2Num2) {
            this.setState(state => ({
                addLevel2Num1: (Math.ceil(Math.random() * 10)) * 2 + state.score,
                addLevel2Num2: (Math.ceil(Math.random() * 10)) * 2 + state.score,
                // subLevel1Num1: Math.ceil(Math.random() * 10) + state.scoreSubLevel1,
                // subLevel1Num2: Math.ceil(Math.random() * 10) + state.scoreSubLevel2,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                response: "",
                incorrect: true
            });
        }
    }
}


inputKeyPressSubLevel2 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.subLevel2Num1 - this.state.subLevel2Num2) {
            this.setState(state => ({
                subLevel2Num1: Math.ceil(Math.random() * 10) + state.score,
                subLevel2Num2: Math.ceil(Math.random() * 10) + state.score,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                response: "",
                incorrect: true
            });
        }
    }
}


resetFullGame = (event) => {
    this.setState({
        addLevel1Num1: 1,
        addLevel1Num2: 1,
        subLevel1Num1: 1,
        subLevel1Num2: 1,
        addLevel2Num1: 1,
        addLevel2Num2: 1,
        subLevel2Num1: 1,
        subLevel2Num2: 1,
        response: "",
        incorrect: false,
        score: 0,
        // scoreSubLevel1: 0
    });
}


resetLineAddLevel1 = (event) => {
    this.setState({
        addLevel1Num1: 1,
        addLevel1Num2: 1,
        response: "",
        incorrect: false
    });
}


resetLineSubLevel1 = (event) => {
    this.setState({
        subLevel1Num1: 1,
        subLevel1Num2: 1,
        response: "",
        incorrect: false
    });
}


resetLineAddLevel2 = (event) => {
    this.setState({
        addLevel2Num1: 1,
        addLevel2Num2: 1,
        response: "",
        incorrect: false
    });
}


resetLineSubLevel1 = (event) => {
    this.setState({
        subLevel2Num1: 20,
        subLevel2Num2: 20,
        response: "",
        incorrect: false
    });
}


ReactDOM.render((
    <div>
        <App />
        <ProblemAddLevel1 />
        <ProblemSubLevel1 />
        <ProblemAddLevel2 />
        <ProblemSubLevel1 />
        <WinRace />
    </div>
), document.querySelector("#app"));

INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

//export {default} from App;

And you get this error when exactly? When the page loads, when you click on a button etc? — rrd
– rrd, Commented May 3, 2019 at 10:42
This happens when the page loads. So I just see this error message. — timotom
– timotom, Commented May 3, 2019 at 10:46
At which line do you get the error? Can you share the whole error - normally you get information on which line the error is.... — Patrick Hollweck
– Patrick Hollweck, Commented May 3, 2019 at 10:47
You are setting state in App component and using it in ProblemAddLevel1 component without passing the state? — ravibagul91
– ravibagul91, Commented May 3, 2019 at 10:47

Sulthan · Accepted Answer · 2019-05-03 18:04:42Z

There are multiple errors I can see but the most obvious ones:

You cannot use class in React components. Use className instead. For example here:

<button onClick={this.resetLineAddLevel1} class="btn btn-primary">Reset Line</button>

exports must be at the top-level. That means outside any { and } and they are written differently:
```
default export App;
```
should be
```
export default App;
```

You have methods that don't return anything in some cases. Your methods should always return a component or at least null, e.g. here:

render() {
    if (this.state.score < 3) {
        return <ProblemAddLevel1 />;
    }
    if (this.state.score < 6) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score < 9) {
        return <ProblemAddLevel2 />;
    }
    if (this.state.score < 15) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score === 15) {
        return <WinRace />;
    }

    // missing return
}

Your event handlers, e.g. updateResponse are declared at top-level, not inside of any class but you are using this inside them.

In summary, I really recommend to go back a step and start with something more basic and ideally find a good editor (e.g. Webstorm) that will show you all the errors immediately.

Black Hole · Accepted Answer · 2019-05-21 18:21:36Z

0

you need render a element. <div></div> by default

  render() {

        let finalComponent;
        if (this.state.score < 3) {
            finalComponent = <ProblemAddLevel1 />;
        }
        if (this.state.score < 6) {
           finalComponent = <ProblemSubLevel1 />;
        }
        if (this.state.score < 9) {
            finalComponent =  <ProblemAddLevel2 />;
        }
        if (this.state.score < 15) {
            finalComponent =  <ProblemSubLevel1 />;
        }
        if (this.state.score === 15) {
            return <WinRace />;
        }
       return(
            <div>{finalComponent}</div>
       );
 }

with the ifs youre not returnin nothing directly, if you want make a return you need do it in one sentence, you can do the return with anonym function returning the component

sorry for my bad english :c

edited May 21, 2019 at 18:21

answered May 3, 2019 at 17:36

Black Hole

1,41416 silver badges17 bronze badges

2 Comments

timotom Over a year ago

Thanks Black Hole. This will certainly help me but i have other issues to fix in this code as well as per the comments.

Jake Worth Over a year ago

This code is missing a return keyword before the divs.

Collectives™ on Stack Overflow

Parsing error: Unexpected token, expected ";"

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related