Hey, I was trying to build my app, and I got a pretty small error about being cautious about using ', I know for login forms and such they're absolutely detremental but I don't think I necessarly need to change it in this case, basically I have a header that displays if there are no entries in the database that just says://AFTER ERROR CHECKING, IF NO ENTRIES return ( {`There's Nothing Here...`} ); //The apostrophe returns an error which I'm sure has something to do with the vunerabilities opened up by sql injection, but what should I do instead? The compiler reccomended using &apos or something simular but putting {&apos} in the template literal just returns There{&apos}s Nothing Here..., should I even change this single value? What is the correct way to add HTML escape characters like &apos to next? Do I just wrap it in a <>?

How to Correctly Escape Characters?

Answered

Eurasian Collared-Dove posted this in #help-forum

Eurasian Collared-DoveOP

2023-09-15T22:44:22.000Z

Hey, I was trying to build my app, and I got a pretty small error about being cautious about using ', I know for login forms and such they're absolutely detremental but I don't think I necessarly need to change it in this case, basically I have a header that displays if there are no entries in the database that just says:

//AFTER ERROR CHECKING, IF NO ENTRIES
return (
      <h1 className="my-4 text-center text-2xl text-gray-500">
        {`There's Nothing Here...`}
      </h1>
    );
//The apostrophe returns an error which I'm sure has something to do with the vunerabilities opened up by sql injection, but what should I do instead? The compiler reccomended using &apos or something simular but putting {&apos} in the template literal just returns There{&apos}s Nothing Here..., should I even change this single value? What is the correct way to add HTML escape characters like &apos to next? Do I just wrap it in a <>?

Answered by Asian black bear

You can also 100% ignore it, there is no security/stability/performance implication

View full answer

13 Replies

aardani

2023-09-15T23:09:26.000Z

when and where does the error occurs?

Eurasian Collared-DoveOP

2023-09-15T23:19:28.000Z

just upon running npm run build, it threw an error earlier about it being angry about ', it was like an hour ago though and I didn't realize the escape character wasn't working until I pushed it to my git repo, I just swapped it back to <h1 className="...">There's Nothing Here</h1> and it works perfectly

Asian black bear

2023-09-15T23:26:56.000Z

@Eurasian Collared-Dove Was this the error?

`'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.eslintreact/no-unescaped-entities

Eurasian Collared-DoveOP

2023-09-15T23:27:07.000Z

yep exactly

am I good to just ignore it? or should I do something about it?

Asian black bear

2023-09-15T23:28:19.000Z

It is just a super pedantic ESLint style rule that is set by default in next. It should not come up when you have it in a react expression like this {"lol's"}

so I am assuming the code shown actually does not throw the error (please say if it does). It should show when you have html text with one such as <div>apos'trope</div>;

aardani

2023-09-15T23:30:22.000Z

it shouldnt show if its in a {}, like minabot says
so it must've been from another part of the code

Asian black bear

2023-09-15T23:30:31.000Z

The pedantic fix is to say <div>apos'trope</div> which the browser will render correctly (I swear, even though it looks silly)

Asian black bear

2023-09-15T23:31:02.000Z

You can also 100% ignore it, there is no security/stability/performance implication

Answer

Asian black bear

2023-09-15T23:31:09.000Z

You can also disable the ESLint rule

.eslintrc.json

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

Eurasian Collared-DoveOP

2023-09-16T22:55:27.000Z

yea that sounds about right, it probably got thrown because originally it the text was just simply inside of the h1 and not in a template literal, I didn't know about that behavior I'll keep it in mind, thank you both!