React className - element.module.css + state.conditional

Question

I'm trying to make a mobile drop down for a React web app.

I'm interested in the correct syntax to use when adding multiple classes to a react element. I want to add styling via an imported module, as well as adding style based on state.

Here is my code.

<div className={[css.mainNavigation, `${this.state.isActive === true ? 'active' : ''}`].join(' ')}>
 </div>

The code is adding .active to my element, however the styling for .active is not coming through.

In my navbar.module.scss, the following code are the relevant lines.

@media (max-width: 650px) {
      .mainNavigation {
        display: none;
      }
      .active {
        display: flex;
      }
    }

I'm guessing it has something to do with the fact that on the frontend, once all the code is rendered, the imported scss style module is using different className's than I am setting. For instance, where I use the classname <div className={css.mainNavigation}>, on the front end, it looks like this:

<div class="_1jGJsP2ItGoSSFd9cLCFqV ">

And after clicking, like this

<div class="_1jGJsP2ItGoSSFd9cLCFqV active">

Yet the .active css, within my modular.scss file is not coming through.

Answer 1

While you could do this manually I recommend you try clsx https://github.com/lukeed/clsx It is a very small utility designed to do exactly what you want and it's quite easy to use as well.

You can also go for classnames, which more popular https://github.com/JedWatson/classnames

Answer 2

I figured it out.

I needed to add the className as css.active not active.

${this.state.isActive === true ? css.active : ''}