How can I fix this violation of this 'react/no-unescaped-entitie' of an ESLint rule?

Question

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?

Answer 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.