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?

I prefer to be able to write you're free instead of something ridiculous like you're free. Is there any good reason why I cant just disable the react/no-unescaped-entities rule? — Andy, Feb 25 '22 at 09:34

Noitidart · Accepted Answer · 2017-08-26T18:42:11.607

142

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.

edited Aug 26 '17 at 18:42

answered Aug 26 '17 at 17:45

Noitidart

35,443
37
154
323

3

This is the best and cleanest way to fix this. Thanks! – Ru Chern Chong Dec 05 '18 at 08:58
Thank you @RuChernChong! :) – Noitidart Dec 05 '18 at 13:09
Another easy way is create the string as a separate variable. `const func = () => { const text = \`you're free\`; return (
{text}
)};` then eslint shouldn't complain about curly braces – aarowman Jun 03 '21 at 16:55
I am searching for a solution which will auto-fix these issues with the `--fix` flag. I've a lot of these warnings and I can't do a find-and-replace as there are a lot of string literals in the same files which have a `'` in them. Anyone got any suggestions? – Abhijit Dec 16 '21 at 08:41
2

I don't think it's super clear that this is actually better... This makes it a lot harder to read your markup. IMO do {`you're free`} so you're not a human reading machine code – ICW Nov 30 '22 at 21:23

score 86 · Answer 2 · edited Aug 12 '21 at 13:32

86

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

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

to your .eslintrc file.

edited Aug 12 '21 at 13:32

pensum

980
1
11
25

answered Jan 01 '19 at 10:57

kiba

1,355
9
7

10

Is there any reason I wouldn't want to do this? IE why is it a rule in the first place by default – Andy Feb 25 '22 at 09:34
6

@Andrew https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md explains why it's a rule - it's supposed to help you from making silly mistakes – Kevin Connors Mar 08 '22 at 17:33
1

solved my problem tnx! – bami Jun 22 '22 at 05:48

score 27 · Answer 3 · answered Apr 11 '17 at 05:33

27

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

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

answered Apr 11 '17 at 05:33

Anthony Kong

37,791
46
172
304

1

Recommneded solution is to use `'` instead of wrapping it as a variable. – Noitidart Aug 26 '17 at 17:45
8

[eslint] Curly braces are unnecessary here. (react/jsx-curly-brace-presence) – rfdc Aug 14 '18 at 12:25

score 23 · Answer 4 · edited Mar 19 '23 at 11:05

23

I had the same issue with next.js. I opened the .eslintrc.json and added 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 }
}

edited Mar 19 '23 at 11:05

Peter Mortensen

30,738
21
105
131

answered Mar 07 '22 at 12:09

crispengari

7,901
7
45
53

score 8 · Answer 5 · edited Mar 19 '23 at 11:06

You can do two things,

It can be escaped with '

E.g.,

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

Or you need to disable some ESLint rules. For disabling the ESLint rules, first find .eslintrc.json in the project directory, and then paste these lines there.
```
{
  "extends": "next/core-web-vitals",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}
```

score 7 · Answer 6 · edited Mar 19 '23 at 11:02

7

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

edited Mar 19 '23 at 11:02

Peter Mortensen

30,738
21
105
131

answered Feb 05 '18 at 20:40

Farid

1,557
2
21
35

3

[eslint] Curly braces are unnecessary here. (react/jsx-curly-brace-presence) – rfdc Aug 14 '18 at 12:25

score 1 · Answer 7 · edited Mar 19 '23 at 11:03

1

This works for me without any ESLint errors:

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

edited Mar 19 '23 at 11:03

Peter Mortensen

30,738
21
105
131

answered Nov 07 '18 at 17:46

Vic

8,261
6
42
55

1

Curly braces are unnecessary here (.react/jsx-curly-brace-presence} – Apr 26 '22 at 08:27
1

That just gives another eslint error since the braces are unnecessary – Reid Moffat Nov 07 '22 at 00:33

score 1 · Answer 8 · answered Oct 19 '22 at 16:37

One way to fix the react/no-unescaped-entities error is by assigning the text with the escape character in it to a variable and then referencing the variable in the JXS.

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

12 Answers12

Linked

Related