eslint error the value of aria-current must be a single token from the following: page,step,location,date,time,true false

user_11830983 0
Viewed 77
<div
     role="button"
     tabIndex="0"
     className="nav-link pad-0-r"
     aria-current={'${selectedTab === item ? 'page' : 'false'}'}
     onClick={()=> onClick(item)}
      onKeyDown={()=> onClick()}
     >
  {item}
</div>

** for the security purpose i am not able to share the full code.... in this div with the help of map i am displaying the the navigation item names but i amm getting this eslint error which i mentioned it. If anybody have any idea how to solve it plz suggest me. **

bootstrap-4 reactjs runtime-error html javascript
2 Answers

Issue

Looks like you are setting the aria-current to some amalgamation of string literals, not really sure what it resolves to in the DOM though.

aria-current={'${selectedTab === item ? 'page' : 'false'}'}

Solution

Use string template correctly, note the backticks:

aria-current={`${selectedTab === item ? 'page' : 'false'}`}
user_86908570

I was able to remove the eslint error by removing the backticks completely:

aria-current={selectedTab === item ? 'page' : 'false'}

user_108597090
Related