Question 254284 in CSS Question posted in
Some basic documentation can be found here.

How to add additional CSS class to React if there is a conditional className exist?

I have this NavLink exist in a React component where a conditioanl class load if button clicked. Like here,

<NavLink to='property' className={` ${({isActive}) => isActive ? "property-info-nav-active" : "property-info-nav-link"} property-info-nav-item `}>Property</NavLink>

I want to add a additional class to this without button interaction, but I found no way!

I tried this, but it is not working.

<NavLink to='property' className={`${({ isActive }) => (isActive ? "property-info-nav-active" : "property-info-nav-link")} additional-class`}>property</NavLink>
Tags:

2

Answers


  1. 0

    isActive should be state.

    <NavLink to='property' className={`${isActive ? "property-info-nav-active" : "property-info-nav-link"} additional-class` additional-class}>property</NavLink>
    Login or Signup to reply.
  2. 0

    You can use the custom function instead of the arrow function.

    function Nav(isActive) {
    function customeFunction(isActive ) {
        return isActive ? "property-info-nav-active" : "property-info-nav-link" + " " +"additional-class"
    }
    return (
        <>
            <div className={customeFunction(isActive)}>
                property
            </div>
        </>
    );
}
export default Nav;

    or you can use Immediately Invoked Function Expression:

     <div className={((isActive) => (isActive ? "property-info-nav-active" : "property-info-nav-link" + " " + "additional-class" ) )()}>
                property
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search