Multiple Inline If-Else with Conditional Operator

Question

Can you give me a hand with this expression . Basically what i am trying to say is If props.row.registered is true set disabled to be true or if is props.row.registered is undefined set it to false.

<Button
     disabled={!props.row.registered ? true : !props.row.registered === undefined ? false : true}
    ...
    />

George · Accepted Answer · 2020-08-21 14:27:21Z

2

Your ternary operator is basically doing this:

if(props.row.registered === true) {
  return true;
else {
  return false;
}

which can be simplified to:

return props.row.registered;

So for your conditions it would be:

props.row.registered || props.row.registered !== undefined

(based on your statement since your code it's setting disabled to true if props.row.registered is false, which is the opposite of your statement)

edited Aug 21, 2020 at 14:27

answered Aug 21, 2020 at 14:17

George

3,0606 gold badges35 silver badges69 bronze badges

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

3 Comments

Sulthan Over a year ago

!props.row.registered === undefined seems fishy :) did you want to write && props.row.registered !== undefined? In general, undefined is falsy though.

PandaMastr Over a year ago

basically the idea is when i get a boolean value from props.row.registered to determinate the disabled , but when i dont have acess to this value in my case undefined to return the button to be disabled=false

PandaMastr Over a year ago

disabled={!props.row.registered && props.row.registered !== undefined} this have done the job thanks mate

Sulthan · Accepted Answer · 2020-08-21 14:24:02Z

1

Your boolean can have 4 values: false, true, undefined and null.

disabled={props.row.registered}

should be enough for your use case because undefined and null are both falsy.

answered Aug 21, 2020 at 14:24

Sulthan

130k23 gold badges223 silver badges277 bronze badges

2 Comments

PandaMastr Over a year ago

yeah but i want when i have a undefined value the disabled to be setted to false. In my case when i write disabled={!props.row.registered} is working fine but when i switch to the next page for some reason the rest of the buttons when they dont have this registered boolean value or value of undefined they are also disabled .

Sulthan Over a year ago

@PandaMastr Then your error is probably somewhere else. undefined won't make your button disabled. Note there is no ! in mine since you said that you want registered === true to make the button disabled.

Collectives™ on Stack Overflow

Multiple Inline If-Else with Conditional Operator

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related