How to fix this violation of this 'react/no-unescaped-entitie' of eslint rule?
I explicitly escape the whole block of text by enclosing the line in {" "}
:
const func = () => {
return (
<div >
{" you're free "}
</div>
)}
Recommended solution is to use '
, ‘
or ’
instead of wrapping it as a variable. So like this:
const func = () => {
return (
<div >
you're free
</div>
)}
For search-ability, it's recommended you have files for localization/internationalization and call them into your app.
The above solutions work only in some cases. It wasn't working for me. In my case, I think it's because we're also using prettier
in our project. To resolve the error, I wrapped the copy in backticks.
const func = () => {
return (
<div>
{`
You're free.
`}
</div>
)
}
By the way, you can disable this kind of warnings by adding
"rules": { "react/no-unescaped-entities": 0 }
to your .eslintrc
file.