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.to} 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?

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?

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?

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.to} 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?