How can I write an else if structure using React (JSX) - the ternary is not expressive enough

Question

I want to write the equivalent in react:

if (this.props.conditionA) {
    Condition A
} else if (this.props.conditionB) {
    

        

Answer 1

If your condition is as simple as what you expressed, I think you can still use ternary as @SkinnyJ mentioned above. It's quite elegant, but I get your concern if there are lot of these conditions to check. There's one other way to solve this problem: using switch statement.

const props = {
  conditionA: "this is condition a"
};

let value;

switch (Object.keys(props)[0]) {
  case "conditionA":
    value = "Condition A";
    break;
  case "conditionB":
    value = "Condition B";
    break;
  default:
    value = "Neither";
}

console.log(value);

There are a couple of assumptions being made here. That the object is not null and that it has only one property.

But if those are true, for scenarios like this, switch might be more performant. This might be of interest for you:

Javascript switch vs if else