CODEWITHSUNDEEP
javascriptreactjsjsx
UncleLou22
UncleLou22

Reputation: 15

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

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.

Upvotes: 1

Views: 2036

Answers (4)

tim
tim

Reputation: 727

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.

Upvotes: 0

AT-martins
AT-martins

Reputation: 644

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
}

Upvotes: 1

Kishan Jaiswal
Kishan Jaiswal

Reputation: 664

      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

Upvotes: 0

John Hooper
John Hooper

Reputation: 372

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

Upvotes: 0

Related Questions