Rendering multiple conditions ternary operator in React

Question

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?

You can use something like this isEnvironmentBFE_OR_BFERENTAL ? 'New component' : (isEnvironmentBFE ? outputEnFr() : outputEnFr()) — Hassan Imam
– 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 — Rafael Buzatto de Campos
– Rafael Buzatto de Campos, Commented Feb 22, 2021 at 15:20
Nesting ternaries: the tool of choice to quickly produce unclear bug-ridden code — Martin
– Martin, Commented Feb 22, 2021 at 15:30

Al Pal · Accepted Answer · 2021-02-22 15:24:16Z

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

answered Feb 22, 2021 at 15:24

Al Pal

3352 silver badges10 bronze badges

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

1 Comment

Zain Khan Over a year ago

instead of else if I want if in the middle then?

Luïs · Accepted Answer · 2021-02-22 15:21:08Z

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 component, or extract that function to a different file if it should be reusable on another component:

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 comprehend what is happening.

Martin · Accepted Answer · 2021-02-22 15:37:50Z

1

Ternary is useful to produce concise code for a simple conditions to switch between two outcomes. 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>

answered Feb 22, 2021 at 15:37

Martin

6,2682 gold badges28 silver badges49 bronze badges

Collectives™ on Stack Overflow

Rendering multiple conditions ternary operator in React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related