CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
user101289
user101289

Reputation: 10422

React.js className value with string interpolation

I'm expressing a jsx template in the following way:

// looping here
<li key={some_key} className={props.location.pathname.includes(path) && 'active'}>
<NavLink to={path}>{path.name}</NavLink>
// end loop

It works fine but in dev mode I'm seeing a lot of warnings about how the non-active li items have empty className properties, which it doesn't like. I tried doing:

<li key={some_key} {props.location.pathname.includes(path.path) ? 'className="active"' : ''}>

but that fails to compile.

Is there a way to do this so the className doesn't get written if it's empty, or possibly the NavLink can take a parent prop or something that it will also set to active?

Upvotes: 2

Views: 1711

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could use string interpolation as follows :

 <li key={some_key} className={`${props.location.pathname.includes(path)?'active':''}`}>

Upvotes: 3

Related Questions