multiple if else in React JSX

Question

I have a situation where i need to add a class to a div element based on multiple conditions, here i have on level of nesting using ternary operator

    <div className={
          typeof this.state.weather.main !== "undefined"
               ? this.state.weather.main.temp > 16
                     ? "app warm"
                     : "app cold"
                : "app"
             }
          >

i would like to have something like,

         if(this.state.weather.main.temp < 16){
           //add "app cold" class
          } else if(this.state.weather.main.temp > 16){
           //add "app warm" class
          } else if (this.state.weather.main.temp > 35){
             //add "app hot" class
            } else if(this.state.weather.main.temp > 50){
               //add "app extreme" class
             }
             .....

and so on

what is the question? What is the problem? By the way, Since you are writing js/ts code you can do whatever you want to do that this languages permit. — Stoic Lion
– Stoic Lion, Commented May 21, 2020 at 11:08
my question is, how to check multiple conditions to add a className to the div, i want to add different className based on temp value here — Nag
– Nag, Commented May 21, 2020 at 11:11
@Nag see my edit for the correct approach as what you're currently doing won't work the way you want it. — goto
– goto, Commented May 21, 2020 at 11:28

rb612 · Accepted Answer · 2020-05-21 11:10:46Z

4

Probably best to have this logic outside of the render method.

You could define a function within your class (or assign a function to a variable if it's in a functional component), for example:

getWeatherClass = () => {
     if(this.state.weather.main.temp < 16){
         return "app-cold"
     } else if(...) {
     ...
}

And then in your render function's JSX:

 <div className={this.getWeatherClass()}>

answered May 21, 2020 at 11:10

rb612

5,6433 gold badges36 silver badges84 bronze badges

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

Comments

goto · Accepted Answer · 2020-05-21 11:36:30Z

I suggest you move that logic outside of JSX and create a method in your component that will return the appropriate styling classes.

class App extends React.Component {
  constructor(props) {
    // ...
  }
  getElementStyles = () => {
    const { temp } = this.state.weather.main;

    if (temp < 16) {
      return "app cold";
    }
    if (temp > 16) {
      return "app warm";
    }
    if (temp > 35) {
      return "app hot";
    }
    return "app";
  }
  render() {
    const classes = this.getElementStyles();
    return (
      <div className={classes}>
        ...
      </div>
    )
  }
}

Also, one suggestion I'd like to make is that you need to look at ranges in temperatures rather than seeing if temp is less than or more than some number, otherwise you will not get accurate results.

getElementStyles = () => {
  const { temp } = this.state.weather.main;

  if (temp >= 0 && temp < 16) {
    return "app cold";
  }
  if (temp >= 16 && temp < 35) {
    return "app warm";
  }
  if (temp >= 35 && temp < 50) {
    return "app hot";
  }
  if (temp >= 50) {
    return "app extreme";
  }
  return "app";
};

Collectives™ on Stack Overflow

multiple if else in React JSX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related