And with an Or conditional statement in react / javascript

Question

I am trying to disable a button depending on a couple of conditions.

<Button disabled={((myobject && myobject.name === "bob") || user.registered) ? true : false} >my button</Button>

Essentially, I want to disable the button if myobject.name is "bob" or if the user is registered (eg. user.registered is not nil). As it stands now, the button seems to get disabled if myobject.name is "bob" but it seems to ignore user.registered. What am I doing wrong?

many thanks!

if it is not bob then it needs to rely on registered's truthiness. You should look at its explicit value. Please build a reproducible example if you can and we will debug it. — Fallenreaper
– Fallenreaper, Commented Feb 13, 2020 at 20:03
The first part of the If statement is where the issue is. (myobject && myobject.name === "bob") myobject exsits so TRUE and myobject.name === "bob" so TRUE. So since both are TRUE user.registered will not be evaluated because the first part of the OR statement is TRUE. Disabled then gets set to true. There are two ways to fix the logic: ((myobject && myobject.name !== "bob") || user.registered) ? true : false OR ((myobject && myobject.name === "bob") || user.registered) ? false: true — hajile78
– hajile78, Commented Feb 13, 2020 at 20:10
@hajile78 I don't think that's correct. The statements work fine on their own so the issue is the combination of them — user_87625129
– user_87625129, Commented Feb 13, 2020 at 20:31
I don't have enough rep to upvote the other answers. I would if I could ;( — user_87625129
– user_87625129, Commented Feb 13, 2020 at 21:50

Clarity · Accepted Answer · 2020-02-13 20:08:33Z

4

You can simplify your code with optional chaining and by omitting the ternary, as it is redundant here:

<Button disabled={myobject?.name === "bob" || user.registered}>my button</Button>

answered Feb 13, 2020 at 20:08

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

Comments

Weslley Victor · Accepted Answer · 2020-02-13 20:11:47Z

0

Inside the button tag you could try to use just the two constraints you want to impose (I didn't understand why the myobject at the beginning though). It could be something like the following:

(myobject.name === "bob" || user.registered) ? true : false

answered Feb 13, 2020 at 20:11

Weslley Victor

488 bronze badges

Comments

thekidxp · Accepted Answer · 2020-02-13 20:43:42Z

0

It looks like you're probably pretty close, the code you have should work fine. I would make sure to check two things. Make sure that user.registered has a "truthy" value.

If it's a string or a number it could be evaluating to false where you don't expect it. In Javascript 0 undefined null "" (empty string) and NaN are all evaluated as false

You should also make sure that myobject is defined somewhere. You'll still get a reference error if myobject never gets declared. if myobject is any of those values that evaluate to false though and user.registered == true then your code should do what I think you're trying to accomplish. If not you might need to give a little more detail as to what you expect to happen and some sample values to look at.

edited Feb 13, 2020 at 20:43

answered Feb 13, 2020 at 20:31

thekidxp

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

And with an Or conditional statement in react / javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related