how to add simple className and fucntion return at the same time in react

user_15165315 0
Viewed 33

I need to add 2 classes to NavLink. One of them is simple word "interlocuter" and the second is "active-int" only when link is active

I tried this:

<NavLink
  to="some-path"
  className={`${moduleStyle["simple-text"]} ${({isActive}) => isActive ? : 'active-int' : ''}`}
>
  Link
</NavLink>
react-router-dom react-router reactjs
2 Answers
user_104291690

In react-router-dom v6 the NavLink component's className prop takes only a string or a function. Use the function variant to return the stringified classnames you want to use.

<NavLink
  to="some-path"
  className={({ isActive }) =>
    [
      moduleStyle["simple-text"],
      isActive ? : 'active-int' : null
    ]
      .filter(Boolean)
      .join(" ")
  }
>
  Link
</NavLink>
user_86908570
Related