In my React component, I have a NavLink that loads a conditional class when a button is clicked. Here's an example:
<NavLink to='property' className={` ${({isActive}) => isActive ? "property-info-nav-active" : "property-info-nav-link"} property-info-nav-item `}>Property</NavLink>
I am trying to add an additional class outside of the conditional inline function classes, but so far I haven't been successful!
I attempted this, but it didn't work as expected.
<NavLink to='property' className={`${({ isActive }) => (isActive ? "property-info-nav-active" : "property-info-nav-link")} additional-class`}>Property</NavLink>
Below is my complete code snippet:
import { NavLink, Outlet } from "react-router-dom"
import "../index.css";
const LandlordLayout = () => {
return (
<>
<div className="landlord-properties-menu">
<NavLink to="." end className={({isActive}) => isActive ? "landlord-nav-link-active" : "landlord-nav-link" }>Dashboard</NavLink>
<NavLink to="income" className={({isActive}) => isActive ? "landlord-nav-link-active" : "landlord-nav-link"}>Income</NavLink>
<NavLink to="properties" className={({isActive}) => isActive ? "landlord-nav-link-active" : "landlord-nav-link"}>Properties</NavLink>
<NavLink to="reviews" className={({isActive}) => isActive ? "landlord-nav-link-active" : "landlord-nav-link"}>Review</NavLink>
</div>
<Outlet/>
</>
)
}
export default LandlordLayout