Ternary Operator second part not rendering React JS

Question

The Second part i.e sign up part is not rendering

The intention is to get the span being changed on click each tab i.e sign ,sign up and forget This is the main class and the form class is called in it. The below code is the original code used to render in the screen


   class App extends React.Component {
 constructor(props) {
   super(props);
   // this.setOptionSignIn = this.setOptionSignIn.bind(this);
   // this.setOptionSignUp = this.setOptionSignUp.bind(this);
   // this.setOptionForget = this.setOptionForget.bind(this);

   this.state = {
     option : 1    
   }
 }

setOptionSignIn = () => {
 this.setState(()=> {
   return {
     option : 1
   }
 })
}
setOptionSignUp = () => {
 this.setState(()=> {
   return {
     option : 2
   }
 })
}
setOptionForget = () => {
 this.setState(()=> {
   return {
     option : 3
   }
 })
}
render() {
 return (
     <div className="container">
     {
       console.log(this.state.option+"before and type is "+ typeof this.state.option)
     }
     <header className={
 `header-headings ${this.state.option === 1 ? 'sign-in' : this.state.option === 2 ? 'sign-up' : 'forgot'}`}>       
         <span>Sign in to your account</span>
         <span>Create an account</span>    
         <span>Reset your password</span>
     </header>   
     {
       console.log(this.state.option+"after and type is "+ typeof this.state.option)
     }
     <ul className="options">
     <li className={this.state.option === 1 ? 'active' : ''} onClick={this.setOptionSignIn}>Sign in</li>
     <li className={this.state.option === 2 ? 'active' : ''} onClick={this.setOptionSignUp}>Sign up</li>
     <li className={this.state.option === 3 ? 'active' : ''} onClick={this.setOptionForget}>Forget</li> 
     </ul>
     <Form optionState={this.state.option} />
     </div>
 )}
}

Try adding parentheses according to the logic you want, like: this.state.option === 1 ? "sign-in": (this.state.option === 2 ? "sign-up" : "forgot") — ZorgoZ
– ZorgoZ, Commented Dec 22, 2019 at 15:24
I tried but still its not taking the second condition when option is 2 — Krishna Kr
– Krishna Kr, Commented Dec 22, 2019 at 15:31
can you do some logs of your state and tell us what it logs at different states? console.log("state is and type is" , this.state.option , typeof this.state.option) — Atin Singh
– Atin Singh, Commented Dec 22, 2019 at 15:47
the code is : <div className="container">{ console.log(this.state.option+"before and type is "+ typeof this.state.option) } <header className={ header-headings ${this.state.option === 1 ? 'sign-in' : this.state.option === 2 ? 'sign-up' : 'forgot'}}> <span>Sign in to your account</span> <span>Create an account</span> <span>Reset your password</span> </header> { console.log(this.state.option+"after and type is "+ typeof this.state.option) } — Krishna Kr
– Krishna Kr, Commented Dec 22, 2019 at 15:51
@AtinSingh the code has been updated and the console details mentioned in previous comment — Krishna Kr
– Krishna Kr, Commented Dec 22, 2019 at 15:56

Andrei Todorut · Accepted Answer · 2019-12-22 16:10:48Z

2

The ternary condition you are using above is correct. The problem may be related to the state which is not properly updated.

The state has to be updated using this.setState() method and not by changing the state properties directly on the this.state object.

Please check out the code below:

SignIn method:

setOptionSignIn() {
   this.setState({
     option: 1
   });
}

SignUp method

setOptionSignUp() {
   this.setState({
      option: 2
   });
}

ForgetPassword method:

setOptionForget() {
   this.setState({
      option: 0
   });
}

answered Dec 22, 2019 at 16:10

Andrei Todorut

4,5762 gold badges19 silver badges27 bronze badges

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

Comments

Atin Singh · Accepted Answer · 2019-12-22 16:12:24Z

0

To switch the span based on the option insert the condition in span.

 <span>{this.state.option === 1 ? 'Sign in to your account' : this.state.option === 2 ? 'Create an account' : 'Reset your password'}</span>

Hope this helps you.

answered Dec 22, 2019 at 16:12

Atin Singh

3,6902 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

Ternary Operator second part not rendering React JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related