Put a conditional statement in my JSX

Question

<li className=`nav-item {(this.props.activeState===1) ? "active":""}`><a href="#">Main</a></li>

^ This is my code. I want the classname "active" to appear next to "nav-item" if the condition is met. I thought putting backticks lets me use text and code together, but I am getting an error - JSX value should be either an expression or a quoted JSX text

How do I properly do this?

Answer 1

You need to make the entire template string a JSX prop expression:

<li className={`nav-item ${(this.props.activeState === 1) ? "active": ""}`}>
  ...
</li>

It might be cleaner to use a variable:

const activeClass = (this.props.activeState === 1) ? "active": "";
// ...
<li className={`nav-item ${activeClass}`}>
  ...
</li>