React Component 'Parsing error: Unexpected token, expected ";"' after render

Question

I am trying to render some complex tertiary logic that organizes my application's components in the correct order. It keeps giving me an error at the bracket immediately after the render method.

I've found the same error described for similar situations on this website, but the solutions didn't help mine. Most of the troubleshooting I read about involved fixing how/where people called methods but this script is only running render. Additionally I made sure to wrap it in one tag and use className instead of class and all other JSX related syntax bug fixes.

Here is my App.js: I am passing along functions into the other components that toggle their respective states of the same name between true and false determining which gets rendered.

import React, { Component } from 'react';
import './index.css';
import Game from './Game.js'
import Homescreen from './Homescreen.js'
import PlayerScreen from './Playerscreen.js'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      Homescreen: true,
      PlayerScreen: false,
      Game: false,
      players: [{
        users: '',
        points: 0,
    }]
  }

  render() {
    return (
      <div>
      {
        (this.state.Homescreen) ?
        <div id="wrapper">
          <Homescreen newScreen={()=>this.setState({Homescreen: false, PlayerScreen: true})}></Homescreen>
        </div> : (this.state.PlayerScreen) ? <div id="wrapper">
          <PlayerScreen players={this.state.players} start={(players)=>this.setState({PlayerScreen: false, Game: true, players: players})}></PlayerScreen>
        </div> : <div id="wrapper"><Game players={this.state.players}></Game></div>
      }
      </div>
      );
    }
  }
}

export default App;

Error message:

Failed to compile.

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

  18 |   }
  19 | 
> 20 |   render() {
     |            ^
  21 |     return (
  22 |       <div>
  23 |       {

Any help would be greatly appreciated.

AT-martins · Accepted Answer · 2019-10-15 04:12:11Z

1

You are missing a curly brackets in your state declaration.

constructor(props){
    super(props);
    this.state = {
      Homescreen: true,
      PlayerScreen: false,
      Game: false,
      players: [{
        users: '',
        points: 0,
    }]
  } // this is missing
}

answered Oct 15, 2019 at 4:12

AT-martins

6641 gold badge5 silver badges12 bronze badges

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

Comments

Kishan Jaiswal · Accepted Answer · 2019-10-15 04:09:59Z

0

      import React, { Component } from 'react';
      import './index.css';
      import Game from './Game.js'
      import Homescreen from './Homescreen.js'
      import PlayerScreen from './Playerscreen.js'

      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            Homescreen: true,
            PlayerScreen: false,
            Game: false,
            players: [{
              users: '',
              points: 0,
            }]
          }
        }
        render() {
          return (
            <div>
              {
                (this.state.Homescreen) ?
                  <div id="wrapper">
                    <Homescreen newScreen={() => this.setState({ Homescreen: false, PlayerScreen: true })} />
                  </div> :
                  (this.state.PlayerScreen) ?
                    <div id="wrapper">
                      <PlayerScreen players={this.state.players} start={(players) => this.setState({ PlayerScreen: false, Game: true, players: players })} />
                    </div> :
                    <div id="wrapper">
                      <Game players={this.state.players} />
                    </div>
              }
            </div>
          );
        }
      }
      export default App

replace this code with yours and check

answered Oct 15, 2019 at 4:09

Kishan Jaiswal

6624 silver badges14 bronze badges

1 Comment

Kishan Jaiswal Over a year ago

there is a mistake in the closing brackets of constructor,and also the closing of child components

John Hooper · Accepted Answer · 2019-10-15 04:08:23Z

0

the message is expecting a semi colon there because you haven't closed your constructor method ;)

Take a break, walk around your apt/house/office give your eyes a second to catch these little things

answered Oct 15, 2019 at 4:08

John Hooper

3822 silver badges7 bronze badges

4 Comments

Jon B Over a year ago

This wouldn't cause React compilation to fail, it is a syntax error in his constructor (missing curly bracket)

John Hooper Over a year ago

"you haven't closed your constructor method" yea i was just tryiing to explain how he can see this error message and work his way back up too the constructor

Jon B Over a year ago

I must have missed that part of the first sentence when I read it the first time, apologies

UncleLou22 Over a year ago

I'm on a plane right now so a walk to and from the bathroom will have to suffice haha. Thanks for the help!

tim · Accepted Answer · 2019-10-15 17:16:55Z

0

Make these changes to your main file.

showComponent = (component) => {
      this.setState({currentComponent: component})
    }


let checkCurrentScreen = this.state.currentScreen;
              {checkCurrentScreen === "homeScreen" ? (
                 <Homescreen showComponent={this.state.showComponent} />
                  ) : checkCurrentScreen ? (
                    <PlayerScreen showComponent={this.state.showComponent} />
                    ) : <DefaultScreen />
               }

Pass in your component with button click

const handleComponentChange = (e, component) => {
    e.preventDefault();
    props.showComponent(component)
  }

I apologize for my type o, I have corrected above. The last method is what I use in a separate component, I like this approach be cause it allows t his method to be used almost anywhere. Here is an example to the button used.

<button 
      onClick={e => handleComponentChange(e, "author")}
      className="comment-submit-button">Cancel
      </button>

This button will pass "e" and the name of the component to the method above the return. This allows for this method to be portable, here is the full method, perhaps this will help.

const handleComponentChange = (e, component) => { // passed in e
    e.preventDefault(); // for this
    props.showComponent(component);  // called method from index.js
  }

With my handleComponentChange I can pass in any props/state to use as I wish to use, plus the name of my component I want to render. I was able to easily add e for prevent default, plus the name.

ShowComponent sits in my index file, where I have my components that will be conditionally rendered.

edited Oct 15, 2019 at 17:16

answered Oct 15, 2019 at 4:27

tim

7471 gold badge10 silver badges12 bronze badges

1 Comment

UncleLou22 Over a year ago

This is an interesting answer, could you elaborate on where exactly I put this in my App.js? I see how your second chunk much more efficiently uses just one state to bounce around the tertiary operators instead of 3 different states so I'll assume that goes in render. While I have to add a currentScreen and also a currentComponent state? They seem to be the same no? Not 100% sure on the third chunk either, I'm relatively inexperienced in React so I appreciate you working with me here!

Collectives™ on Stack Overflow

React Component 'Parsing error: Unexpected token, expected ";"' after render

4 Answers 4

Comments

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related