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&apos;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.