Put the conditional in my JSX
<li className=`nav-item {(this.props.activeState===1) ? "active":""}`><a href="#">Main</a></li>
^ This is my code. I want the class name "active" to appear next to "nav-item" if the condition is met. I thought using backticks allows me to use text and code together, but I am getting an error. JSX value must be expression or quoted JSX text
How to do it right?
+3
source to share
1 answer
You need to make the whole template string a JSX prop expression:
<li className={`nav-item ${(this.props.activeState === 1) ? "active": ""}`}>
...
</li>
It might be easier to use a variable:
const activeClass = (this.props.activeState === 1) ? "active": "";
// ...
<li className={`nav-item ${activeClass}`}>
...
</li>
+5
source to share