React className with ternary operator

Hi, here and example of how use a ternary condition to insert a CSS class in a component. 

Javascript ternary operator is a shortcut for the if-else statement, you can see the ternary like this:

condition ? expression1 : expression2;

At the first place you need to insert the condition, so if the condition is true, the ternary operator returns expression1, otherwise it returns the expression2.

So, using this ternary condition we can add some class to our DOM elements. 

Here you go the examples that I created for you:

Native CSS

<section 
   className={`baseClass ${ open ? `myNewClass` : ''}`}
>
  <h2>Im a block</h2>
</section>

Sass

<section 
 className={`${styles.baseClass} ${ open ? `${styles.myNewClass}` : 
    '' } `}
>
 <h2>Im a block</h2>
</section>

Criss.