Applying class in next.js

Question

Newbie here. I'm trying to convert this class <div className={`banner-row marquee ${playMarquee && "animate"}`}> for next.js. I can't figure out the best way to do it. Anyone can help? Thanks!!

Answer 1

One way to convert the class for use in a Next.js project would be to use a ternary operator to conditionally assign the "animate" class based on the value of playMarquee.

<div className={`banner-row marquee ${playMarquee ? "animate" : ""}`}>

You can also use classnames npm package, it's a small JavaScript utility for conditionally joining classNames together.

import classNames from 'classnames';
<div className={classNames('banner-row', 'marquee', { animate: playMarquee })}>

You can use whichever approach you find most readable and maintainable for your project.