ReactJS complex (if / else if) not working as expected

Question

I have the following conditional

if (
    !user.userId
    && match.path === '/login'
) {
    component = <Login/>
} else if (
    user.userId
    && !user.OTPVerified
    && !user.loginWithPassword
    && match.path === '/verify'
) {
    component = <VerifyOTP/>
} else if (
    (user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword)
    && !user.profileCompleted
    && match.path === '/complete-profile'
) {
    console.log('userid', user.userId)
    console.log('otpverified', user.OTPVerified)
    console.log('loginWithPassword', user.loginWithPassword)
    console.log('profileCompleted', user.profileCompleted)
    console.log('path', match.path)
    component = <CompleteProfile/>
} else if (
    user.userId
    && !user.OTPVerified
    && user.loginWithPassword
    && user.profileCompleted
    && match.path === '/login-password'
) {
    component = <LoginWithPassword/>
} else {
    component = <Login/>
}

console returns

userid 29
otpverified true
loginWithPassword false
profileCompleted true
path /login

I dont get why am i still seeing CompleteProfile component

as per your output, your if hits this else if ( (user.userId && user.OTPVerified) , what's your expected output? — Nonik
– Nonik, Commented Dec 16, 2020 at 20:50
@Nonik thats whats confusing, it shouldn't because yes (user.userId && user.OTPVerified) is true but && !user.profileCompleted is also true so it should just go to else — Fahad Sohail
– Fahad Sohail, Commented Dec 16, 2020 at 20:54
Your && and || operators have the same precedence and therefore are checked left to right. Since (user.userId && user.OTPVerified) evaluates to true and therefore the condition of your if is true || false && false && false. That is logically equivalent to true || (false && (false && false)) which evaluates to true — Chad S.
– Chad S., Commented Dec 16, 2020 at 20:55

Todd Skelton · Accepted Answer · 2020-12-16 21:08:51Z

1

Add some parenthesis around those two expressions with the || between them if they should be evaluated together.

((user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword))

This change makes your Login component show based on the values.

You can remove the inner ones too and the && will be evaluated first.

(user.userId && user.OTPVerified || user.userId && user.loginWithPassword)

else if (
    (user.userId && user.OTPVerified || user.userId && user.loginWithPassword)
    && !user.profileCompleted
    && match.path === '/complete-profile'
)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#Operator_precedence

console.log((true && true) || (true && false) && false && false) //true
console.log((true && true || true && false) && false && false) // false

edited Dec 16, 2020 at 21:08

answered Dec 16, 2020 at 20:57

Todd Skelton

7,2873 gold badges39 silver badges49 bronze badges

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

2 Comments

Todd Skelton Over a year ago

No you don't, you have them around each one, not around both.

Fahad Sohail Over a year ago

oh, wonderful that solves the problem, thank you so much!!

Collectives™ on Stack Overflow

ReactJS complex (if / else if) not working as expected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related