CODEWITHSUNDEEP
reactjsreact-bootstrap
Tornado547
Tornado547

Reputation: 241

React - Unexpected Token, expected }

import React, { Component } from "react"
import { Navbar,NavItem,Nav,Button } from "react-bootstrap"

class NavbarMain extends Component {
    constructor(){
      this.state={isLoggedIn:false,logInName:null}
    }
    render(){
      let button = null;
      let label = null;
      if(this.state.isLoggedIn){
        button = (<NavItem><Button>Log Out</Button></NavItem>);
        label = (<NavItem>Logged in as: {this.state.logInName}<NavItem>);
      }else{
        button = (<NavItem><Button>Log In</Button></NavItem>);
        label = (<NavItem>Not logged in</NavItem>);
      }
      return(
        <Navbar>
          <Navbar.Brand>
          <p>Web app</p>
          </Navbar.Brand>
          <Nav pullRight>
            {Label}
            {Button}
          </Nav>
        </Navbar>
      )
    }
}

export default NavbarMain

I am trying to create a web app using react and react-bootstrap, and am using this code for the navbar displayed at the top of the page. I get the following error

Syntax error: C:/Users/Levi/Desktop/lootbox_simulator/lootbox-simulator/src/Components/NavbarMain.js: Unexpected token, expected } (15:63)

  13 |           label = (<NavItem>Logged in as: {this.state.logInName}<NavItem>);
  14 |         }else{
> 15 |           button = (<NavItem><Button>Log In</Button></NavItem>);
     |                                                                ^
  16 |           label = (<NavItem>Not logged in</NavItem>);
  17 |         }
  18 |         return(

Why?

Upvotes: 3

Views: 2480

Answers (1)

simbathesailor
simbathesailor

Reputation: 3687

This line is wrong 

<NavItem>Logged in as: {this.state.logInName}<NavItem>

It should be

<NavItem>Logged in as: {this.state.logInName}</NavItem>

Upvotes: 2

Related Questions