ReactJS link with conditional CSS classes

Question

I'm starting to learn React/NextJS and find the way to write conditional CSS very ugly compared to VueJS. I'm curious if someone could look over this code snippet and guide me in the right direction towards a cleaner way of designing my React code.

<Link key={link.text} href={link.to}>
    <a className={`border-transparent border-b-2 hover:border-blue-ninja ${
        activeClass === link.to ? 'active' : ''
    }`}>
        {link.text}
    </a>
</Link>

Is this best practice?

Answer 1

You could use a conditional className utility. There are several solutions in the ecosystem, but I would recommend clsx.

Your example would then be:

<Link key={link.text} href={link.to}>
    <a className={clsx('border-transparent border-b-2 hover:border-blue-ninja', { active: activeClass === link.to } )}>
        {link.text}
    </a>
</Link>