Multiple classNames with CSS Modules and React

Question

I'm using the following code to dynamically set a className in a React component based upon a boolean from props:

<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>

However, I'm also using CSS Modules, so now I need to set the className to:

import styles from './styles.css';

<div className={styles.sideMenu}> ... </div>

I'm having trouble with this - I tried using classnames to gain more control with multiple classes, but because I need the end result to be that the className is set to both styles.sideMenu AND styles.active (in order for CSS Modules to kick in) I'm unsure how to handle this.

Any guidance greatly appreciated.

Answer 1

Using classnames and es6:

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen }); 

Using classnames and es5:

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : ''); 

Answer 2

Bit late to the party here, but using string templates works for me - you could move the ternary operator out to a const if you'd like as well:

<div className={`${styles.sideMenu} ${this.props.menuOpen ? styles.inactive : styles.active}`> ... </div>