Conditional classnames in Next.js

Question

First post in a long time so feeling a little out of the loop. Long stort short i'm in a little bit of a pickle. I created a navmenu pop out that toggles classname based on the isActive conditional. works beautifully in React but I can't work out how to impliment it in Next.js formatting using the classname={styles.selector syntax} if anyone can advise i'd be greatful. Code below

<div className={isActive? "drop-menu menu-2": null}> <a>text</a></div>

Answer 1

Use clsx library:

Example:

import clsx from 'clsx'

// ...

<div className={clsx(isActive ? "drop-menu menu-2" : null)}> <a>text</a></div>

// or

<div className={clsx(isActive && "drop-menu menu-2")}> <a>text</a></div>