How to write Nested if else in react js

Question

I am trying to implement nested if else in react compound slider. I am able to write if else using ternary operator and that is working fine

<div className={source.value >.3 ? 'greater': 'lesser'}>
   <Track
     key={id}
     source={source}
     target={target}
     getTrackProps={getTrackProps}
     />
</div>

so here i am able to check only condition whether it is greater than .3 or less than but am trying to implement

if(source.value <.3)
{
return classNameFirst
}
else if (source.value >.3 && source.value <.7){
return classnameSecond
}
else if (source.value >.7 && source.value <.9){
return classnamethird
}
else if (source.value >.9 && source.value <1.2){
return classnameFourth
}
else{
return classnamefive
}

how can i implement this thing into my jsx code.

Thanks in advance.

You can't put if/elses straight into JSX but you can recreate the same logic with ternaries. However, it's better not to inline a bunch of logic like that, it mixes up the logic and view code and gets messy. Just have a function which determines which class name is apt, then have <div className={getTrackClassName(source)}> or something similar — Jayce444
– Jayce444, Commented May 7, 2019 at 5:26

Utsav Patel · Accepted Answer · 2019-05-07 07:24:18Z

Define a function in your helper or utility file. You can also define the function in your class itself, but generally it is a good idea to use helper file for this.

So you can have a function getTrackClass which will accept source.value as the parameter and return you the appropriate class.

getTrackClass = value => {
  if (value < 0.3) {
    return classNameFirst;
  } else if (value > 0.3 && value < 0.7) {
    return classnameSecond;
  } else if (value > 0.7 && value < 0.9) {
    return classnamethird;
  } else if (value > 0.9 && value < 1.2) {
    return classnameFourth;
  } else {
    return classnamefive;
  }
};

After this you can use this function to get the class for your Track component.

<div className={this.getTrackClass(source.value)}>
   <Track
     key={id}
     source={source}
     target={target}
     getTrackProps={getTrackProps}
     />
</div>

Dinesh Verma · Accepted Answer · 2019-05-07 06:25:50Z

0

Use the package named classNames in your application.

https://www.npmjs.com/package/classnames

This will give you the flexibility of using multiple classes, but will also allow you to use classes conditionally in a more readable way.

answered May 7, 2019 at 6:25

Dinesh Verma

6668 silver badges9 bronze badges

Comments

cbdeveloper · Accepted Answer · 2019-05-07 07:04:11Z

0

Is this what you're trying to accomplish?

return(
  source.value < .3 ?
    classNameFirst
  : source.value < .7 ?
      classNameSecond
      : source.value < .9 ?
          classNameThird
          : source.value < 1.2 ?
              classNameFourth
              : classNameFive
);

answered May 7, 2019 at 7:04

cbdeveloper

31.9k45 gold badges209 silver badges404 bronze badges

Collectives™ on Stack Overflow

How to write Nested if else in react js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related