title: How to write Nested if else in react js
body: <p>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</p>
  
  <pre><code>&lt;div className={source.value &gt;.3 ? 'greater': 'lesser'}&gt;
     &lt;Track
       key={id}
       source={source}
       target={target}
       getTrackProps={getTrackProps}
       /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so here i am able to check only condition whether it is greater than .3 or less than but am trying to implement</p>
  
  <pre><code>if(source.value &lt;.3)
  {
  return classNameFirst
  }
  else if (source.value &gt;.3 &amp;&amp; source.value &lt;.7){
  return classnameSecond
  }
  else if (source.value &gt;.7 &amp;&amp; source.value &lt;.9){
  return classnamethird
  }
  else if (source.value &gt;.9 &amp;&amp; source.value &lt;1.2){
  return classnameFourth
  }
  else{
  return classnamefive
  }
  </code></pre>
  
  <p>how can i implement this thing into my jsx code.</p>
  
  <p>Thanks in advance.</p>