javascriptcssreactjssassclass-names

How can I rewrite this conditional css using classnames?

In react component, I'm using css module and I got this conditional css that is working fine, but I would like to refactor it using classnames library.

className = { `${active ? styles.activeLabel : styles.notActiveLabel} 
${weight === 'bold' ? styles.bold : ''}`}

So I tried this but I get error msg saying active will always return false.

className={classnames({styles.activeLabel: !!active}, {styles.bold: weight === 'bold'})}

I also tried styles.activeLabel: active === true, but I get another error message. Basically I want when active prop is true then apply activeLabel class, if active is false then apply notActiveLabel class. How can I accomplish this using classnames?

Solution

  • The Keys on JS Object must to be a string or a number, you can't set a key like:

    // this does not work
const object = { key: 'value' }
const object2 = { object.key: true }

    So, when you need to get a key with dynamic name you have to do with square brackets

    // this works
const object = { key: 'value' }
const object2 = { [object.key]: true }

    Try to do something like:

    className={classnames({ [styles.activeLabel]: !!active}, {[styles.bold]: weight === 'bold'})}

    References:
    Multiple classNames with CSS Modules and React
    How do I create a dynamic key to be added to a JavaScript object variable