Getting a parsing error in my React application

Question

I am getting a parsing error when running my React app Failed to compile ./src/App.js Line 7: Parsing error: Unexpected token, expected "{"

I have checked my code for any unexpected token and did not see any.

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import './game.html';
    import Grid from './board.js';
    class App extends from React.Component {
        render(){
            return(
                     <div className="game-board">
                        <Grid/>
                     </div>
                  );
        }
    }
    export default App;


    import React from 'react';
    import Square from './square.js';
    class Grid extends React.Component{
        renderSquare(i)
        {
            return <Square value={i}/>
        }
        render(){
            <div className="gamerow">
                {this.renderSquare(1)}
                {this.renderSquare(2)}
                {this.renderSquare(3)}
            </div>
            <div className="gamerow">
                {this.renderSquare(4)}
                {this.renderSquare(5)}
                {this.renderSquare(6)}
            </div>
            <div className="gamerow">
                {this.renderSquare(7)}
                {this.renderSquare(8)}
                {this.renderSquare(9)}
            </div>
            }
    }
   export default Grid;


   import React from 'react';
  //import Grid  from './board.js
   class Square extends React.Component{
        render(){
            return(
                      <button className= "square">{this.props.value} 
                      </button>
                  );
        }
   }

export default Square; I am expecting the program to render a 3 by 3 grid on the UI.

Dennis Vash · Accepted Answer · 2019-09-13 15:41:06Z

3

There is no such keyword from when extending a class:

//                 v remove from
class App extends from React.Component` { ... }

Moreover, in Grid component, you need a return statement from render function, you can only render a single ReactElement, in this example I used <React.Fragment/> to group all <div/> elements.

class Grid extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
  render() {
    return (
//    v <React.Fragment>
      <>
        <div className="gamerow">
          {this.renderSquare(1)}
          {this.renderSquare(2)}
          {this.renderSquare(3)}
        </div>
        <div className="gamerow">
          {this.renderSquare(4)}
          {this.renderSquare(5)}
          {this.renderSquare(6)}
        </div>
        <div className="gamerow">
          {this.renderSquare(7)}
          {this.renderSquare(8)}
          {this.renderSquare(9)}
        </div>
      </>
    )
  }
}

edited Sep 13, 2019 at 15:41

answered Sep 13, 2019 at 15:33

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dennis Vash Over a year ago

Yea ty its the prettier :-(

user11910739 · Accepted Answer · 2019-09-13 15:33:52Z

1

Problem in below line.

class App extends from React.Component {

It should be look like below

class App extends React.Component {

Also you have to return the render method of Grid component.

Hope this will help you!

answered Sep 13, 2019 at 15:33

user11910739

Collectives™ on Stack Overflow

Getting a parsing error in my React application

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related