While working on an animated dropdown for a navbar, I came across this interesting dilemma.
In a strict React setup, you can use an inline if/else statement with onClick toggle to manage CSS animation styles. To ensure default styling (no animation) when the state is null, you can add a class before the inline operation:
<div className={`navbar ${reactState ? "expanded" : "collapsed"}`}>
How can I achieve the same in NextJS?
I searched through the documentation but couldn't find anything relevant. I tried the following approaches without success:
<div className={styles.navbar (reactState ? `${styles.expanded}` : `${styles.collapsed}`)}>
<div className={styles.navbar [reactState ? `${styles.expanded}` : `${styles.collapsed}`]}>
<div className={styles.navbar `${reactState ? `${styles.expanded}` : `${styles.collapsed}`}`}>
The only thing that worked was the following complex solution, which seems like too much:
<div className={
reactState != null ?
(reactState ? `${styles.navbar} ${styles.expanded}`
: `${styles.navbar} ${styles.collapsed}`)
: styles.navbar
}>
I'm clearly struggling to grasp how NextJS handles React styling. Any assistance would be greatly appreciated.