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?
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