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
– Andy, Commented Feb 25, 2022 at 9:34

Noitidart · Accepted Answer · 2017-08-26 18:42:11Z

191

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, 2017 at 18:42

answered Aug 26, 2017 at 17:45

Noitidart

37.6k41 gold badges182 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aarowman Over a year ago

Another easy way is create the string as a separate variable. const func = () => { const text = `you're free`; return ( <div > {text} </div> )}; then eslint shouldn't complain about curly braces

Abhijit Over a year ago

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?

ICW Over a year ago

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

Eric Burel Over a year ago

Hi, about the "recommended solution" => by whom? What's the consequence of not escaping those characters? Edit: this link seems relevant: github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/… also show how to restrict the characters (I dislike escaping all apostrophes...)

pensum · Accepted Answer · 2021-08-12 13:32:48Z

117

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, 2021 at 13:32

pensum

1,0191 gold badge13 silver badges28 bronze badges

answered Jan 1, 2019 at 10:57

kiba

1,6551 gold badge11 silver badges7 bronze badges

2 Comments

Andy Over a year ago

Is there any reason I wouldn't want to do this? IE why is it a rule in the first place by default

Kevin Connors Over a year ago

@Andrew github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… explains why it's a rule - it's supposed to help you from making silly mistakes

Peter Mortensen · Accepted Answer · 2023-03-19 11:05:03Z

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

Anthony Kong · Accepted Answer · 2017-04-11 05:33:34Z

32

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

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

answered Apr 11, 2017 at 5:33

Anthony Kong

41.4k52 gold badges192 silver badges325 bronze badges

2 Comments

Noitidart Over a year ago

Recommneded solution is to use ' instead of wrapping it as a variable.

rfdc Over a year ago

[eslint] Curly braces are unnecessary here. (react/jsx-curly-brace-presence)

Peter Mortensen · Accepted Answer · 2023-03-19 11:06:56Z

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" } } 
```

Alvin Mutuma · Accepted Answer · 2023-08-05 23:14:33Z

add this on the file that is causing the error

/* eslint-disable react/no-unescaped-entities */

also add this in the eslintrc.json file

{ "extends": "next/core-web-vitals", "rules": { "react/no-unescaped-entities": "off", "@next/next/no-page-custom-font": "off" } }

Peter Mortensen · Accepted Answer · 2023-03-19 11:02:55Z

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

[eslint] Curly braces are unnecessary here. (react/jsx-curly-brace-presence)

Peter Mortensen · Accepted Answer · 2023-03-19 11:09:11Z

You can also use this extension in Visual Studio Code to fix these issues: html-entities

It is a good programming practice to not disable the HTML entity warning as it can help prevent some issues.

Randy Burden · Accepted Answer · 2022-10-19 16:37:54Z

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.

Comments

Peter Mortensen · Accepted Answer · 2023-03-19 11:03:38Z

1

This works for me without any ESLint errors:

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

edited Mar 19, 2023 at 11:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 7, 2018 at 17:46

Vic

9,0817 gold badges48 silver badges56 bronze badges

2 Comments

user13026823 Over a year ago

Curly braces are unnecessary here (.react/jsx-curly-brace-presence}

Reid Moffat Over a year ago

That just gives another eslint error since the braces are unnecessary

DevJogger · Accepted Answer · 2023-04-14 18:04:28Z

You can add this line on top to disable the error for entire file

/* eslint-disable react/no-unescaped-entities */

Penny Liu · Accepted Answer · 2024-12-26 10:24:09Z

You can disable this kind of warnings by adding the following setting to your eslint.config.js.

module.exports = { // Other configuration options... rules: { 'react/no-unescaped-entities': 'off', }, };

When using Vite to create a React project, an eslint.config.js file is generated to manage ESLint settings.

To verify

If your rule ('react/no-unescaped-entities': 'off') is correctly configured, ESLint will not display any warnings for unescaped entities in JSX.

Usama kaleem · Accepted Answer · 2023-12-10 18:28:09Z

I encountered this issue in my upcoming project and successfully resolved it by encapsulating my code within backticks (``).

Ashwin Kumar · Accepted Answer · 2024-04-16 08:08:42Z

Problem:

I'm encountering the "react/no-unescaped-entities" error during Vercel deployment of my Next.js project. This error specifically targets apostrophes (') within JSX.

I've tried:

Disabling the ESLint rule
Ensuring HTML entities (like ') are used.
Checking for configuration conflicts.

These solutions work in some cases, but the error persisted for me.

Cause:

The root cause turned out to be an outdated eslint-config-next dependency. Upgrading this package resolved the deployment issue.

Solution

Identify Version: Check your current eslint-config-next version in your package.json file.

Upgrade: Update to the latest version using either npm or yarn:

npm install --save-dev eslint-config-next@latest

Hope it will work for you!

jAC · Accepted Answer · 2024-08-25 01:13:43Z

I see most people here like to put their whole text as a variable or the whole line in backticks. For me i just do put the quote in quotes ex: {"'"}. It is ugly but a lot less work for the same results.

Collectives™ on Stack Overflow

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

16 Answers 16

4 Comments

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

To verify

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

4 Comments

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

To verify

Comments

Comments

Comments

Comments

Related