How to fix this violation of this "reaction / non-unescaped-entitie" eslint rule?

Question

This is my code:

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

Somehow eslint puts the line "you are free" with an error error HTML entities must be escaped react/no-unescaped-entities

However, from what I see, jsx has already eluded apostrophes. I see that the words are you're freedisplayed without problems. If I remove it as 'it will be very difficult for me to search for the string (I would expect that the search you're freein the editor will return a hit. But, obviously, the editor will skip because the text is actually you're free)

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

Answer 1

I explicitly hide the entire block of text by inserting a line in {" "}:

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

Answer 2

- ', ‘ ’ , . :

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

/ .

Answer 3

The above solutions only work in some cases. This did not work for me. In my case, I think because we also use prettierin our project. To fix the error, I wrapped the copy in backlinks.

const func = () => {
  return (
    <div>
      {`
        You're free.
      `}
    </div>
  )
}