switch between sign in register and home in react through ternary operartor

1
votes

I am trying to switch between a sign-in, register and a home page form using ternary operator. But, when I compile, there's an error saying 'this.state.route === signIn' this is a reserved keyword. I know, what a reserved keyword is but I can't get why its assigning this instead of checking the condition, can anyone help correct my code? 

<Navigation onRouteChange={this.onRouteChange}/> /*route change for sign out button*/
    { this.state.route === 'home'/*displays homescreen*/
        ?  <div>
            <Logo />
               <Rank />
                 <ImageLinkForm 
                 onInputChange={this.onInputChange} 
                 onSubmit={this.onSubmit}
                 />
                     <FaceRecognition box={this.state.box} 
                       imageUrl=  {this.state.imageUrl} />  
                      </div>
        :{ 
            this.state.route === 'signIn'/*shows error that this is a reserved keyword*/
            ? <SignIn onRouteChange={this.onRouteChange} />
            :<Register onRouteChange={this.onRouteChange} />
        }
   }
1
reactjsreact-routerreact-state

1 Answers

0
votes

Seems there's an extra curly bracket after colon. Also try separating objects using round brackets for readablility. Try this :

   <Navigation onRouteChange={this.onRouteChange} />
     {this.state.route === 'home' ? (
       <div>
         <Logo />
         <Rank />
         <ImageLinkForm 
           onInputChange={this.onInputChange} 
           onSubmit={this.onSubmit}
         />
         <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl} />  
       </div>
     ) : (
       this.state.route === 'signIn
         ? <SignIn onRouteChange={this.onRouteChange} />
         : <Register onRouteChange={this.onRouteChange} />
     )}