How to fix this violation of this 'react/no-unescaped-entitie' of eslint rule?

This is my code:

const func = () => {
  return (
    <div >
       you're free
      </div>
  )}

Somehow eslint flags the line "you're free" with error error HTML entities must be escaped react/no-unescaped-entities

However from what I can see jsx has escaped the apostrophes already. I can see the words you're free is rendered without issue. If I escape it as ', then it will be very hard for me to search for the string (I would expect a search of you're free in an editor to return a hit. But obviously the editor will miss because the text is actually you're free)

So what is the best way to address this eslint exception?

Solution 1:

Recommended solution is to use ', ‘ or ’ instead of wrapping it as a variable. So like this:

const func = () => {
  return (
    <div >
       you&apos;re free
      </div>
  )}

For search-ability, it's recommended you have files for localization/internationalization and call them into your app.

Solution 2:

By the way, you can disable this kind of warnings by adding

"rules": { "react/no-unescaped-entities": 0 }

to your .eslintrc file.