How to make a ternary if with two conditions?

Question

I want to make a ternary with two conditions using the following form:

(!bool1 && bool2) && <Component />

I'm having some syntax problem I think, but I don't know how to put it this way.

Would you like to avoid a:

!bool1 && bool2 ? <Component /> : ""

"I'm having some syntax problem I think" what does this mean? What is the error? Do you expect us to guess what the error is? — Geeky Quentin, Aug 18 '22 at 16:32
For ternary operator like `(!bool1 && bool2) ? trueCase : falseCase` here both true case and false case statements' return types should be the same. — Mateen, Aug 18 '22 at 16:35
`(!bool1 && bool2) ? : null`? https://stackoverflow.com/questions/67977414/what-to-return-in-ternary-operator-in-reacts-jsx-when-want-to-return-nothing — GrafiCode, Aug 18 '22 at 16:38

score 1 · Accepted Answer · answered Aug 18 '22 at 17:19

You can go nuts with nested ternaries, but it's not wise. At some point, you'll want to consider a switch statement.

let bar = 'b';
var foo = (
  bar === 'a' ? 1 : // if 
  bar === 'b' ? 2 : // else if 
  bar === 'c' ? 3 : // else if
  bar === 'd' ? 4 : //another else if
  bar === 'e' ? 5 : //another else if
  null // else 
);

console.log(foo);

How to make a ternary if with two conditions?

1 Answers1