'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:^[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:^[2]

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

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

to your .eslintrc file.

Solution 3:^[3]

I explicitly escape the whole block of text by enclosing the line in {" "}:

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

Solution 4:^[4]

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>
  )
}

Solution 5:^[5]

I had the same issue with next.js what I did was to open the .eslintrc.json and add the following:

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

Now my .eslintrc.json will look as follows:

{
  "extends": "next/core-web-vitals",
  "rules": { "react/no-unescaped-entities": 0 }
}

Solution 6:^[6]

This works for me with no eslint errors:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	pensum
Solution 3	Anthony Kong
Solution 4	Farid
Solution 5	crispengari
Solution 6	Vic

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]