javascript - Rendering multiple conditions ternary operator in React - Stack Overflow

First time trying this so please bare with me.

I want to return some elements based on one of three conditions. Currently the code works for two conditions:

<h1 id="largeh1">
   {isEnvironmentBFE
     ? outputEnFr(
       "BFE Environment English Text",
       "BFE Environment French Text",
       this.props.lang
       )
     : outputEnFr(
        "Acme Environment English Text",
       "Acme Environment French Text",
       this.props.lang
     )
    // Want third condition here
    }
</h1>

I'd like to add one more condition for if the environment is "isEnvironmentBFE_OR_BFERENTAL" - so when people hit this third environment, it gives them different English / French values. Would like to stick with a ternary operator if possible.

Any idea how I can add a third condition in here?

First time trying this so please bare with me.

I want to return some elements based on one of three conditions. Currently the code works for two conditions:

<h1 id="largeh1">
   {isEnvironmentBFE
     ? outputEnFr(
       "BFE Environment English Text",
       "BFE Environment French Text",
       this.props.lang
       )
     : outputEnFr(
        "Acme Environment English Text",
       "Acme Environment French Text",
       this.props.lang
     )
    // Want third condition here
    }
</h1>

I'd like to add one more condition for if the environment is "isEnvironmentBFE_OR_BFERENTAL" - so when people hit this third environment, it gives them different English / French values. Would like to stick with a ternary operator if possible.

Any idea how I can add a third condition in here?

• javascript
• reactjs

Share Improve this question Follow asked Feb 22, 2021 at 15:15 JD FillJD Fill 41222 gold badges88 silver badges2626 bronze badges 3

• You can use something like this isEnvironmentBFE_OR_BFERENTAL ? 'New ponent' : (isEnvironmentBFE ? outputEnFr() : outputEnFr()) – Hassan Imam Commented Feb 22, 2021 at 15:17
• it would be better to abstract the logic to a helper function instead. your template would get messy easily – buzatto Commented Feb 22, 2021 at 15:20
• 1 Nesting ternaries: the tool of choice to quickly produce unclear bug-ridden code – Martin Commented Feb 22, 2021 at 15:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

<h1 id="largeh1">
   {
     isEnvironmentBFE
     ? (
         outputEnFr(
           "BFE Environment English Text",
           "BFE Environment French Text",
           this.props.lang
         )
     ) : NEW CONDITIONAL HERE
     ? (NEW RESULT)
     : (
         outputEnFr(
           "Acme Environment English Text",
           "Acme Environment French Text",
           this.props.lang
         )
     )
   }
</h1>

This is equivalent to

if(isEnvironmentBFE)
  //yadda
else if (foo)
  //yadda yadda
else 
  //yadda

The most readable way to go about this is by moving that logic out of your return statement and creating a function for it which handles that logic. You can do this within the same ponent, or extract that function to a different file if it should be reusable on another ponent:

const Component = () => {

  const renderText = () => {
    if (...) {
      return ...
    } else if (...) {
      return ...
    }

    return ...
  }

  return (
    <h1>
      renderText();
    <h1>
  )
};

If you would like to stick with a ternary you can do:

return condition1 ? (condition2 ? result1 : result2) : result3 

Depends on your personal preference, although I suggest using an if-statement or a switch-statement for anything that has more than 1 condition as it is easier to read and prehend what is happening.

Ternary is useful to produce concise code for a simple conditions to switch between two outes. But I advise against nesting it. There is a nice React idiom that would make more sense here:

<div>
  { condition1 && (<div>foo</div>)}
  { condition2 && (<div>bar</div>)}
  { condition3 && (<div>buz</div>)}
</div>