Skip to content
Advertisement

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.

JavaScript

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

JavaScript

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?

Advertisement

Answer

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

JavaScript

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

JavaScript

Try to do something like:

JavaScript

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

Advertisement