Answer a 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?

Answers

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.