Why does React only allow a subset of HTML entitie

Question

The only relevant documentation I found on this issue simply says that I can use HTML entities in React.

However, this doesn't entirely seem to be the case. For example, & and ∑ work, while | and # don't. Was that a conscious design decision? If yes, what is the reason?

Example:

const App = () => (
  <div>
    <h2>&amp;, &sum; - this works. &vert;, &num; - this doesn't.</h2>
  </div>
);

Example in CodeSandbox

Answer 1

ReactJS only supports HTML4 special entities.

This might be intentional, although the documentation is unclear about it. My guess would be that HTML entities are commonly used to mask characters that are used in code as well, but since ReactJS has Unicode support, it's not as needed to make use of the new entities that can be represented in Unicode.

You can find a list of HTML4 entities here.

Answer 2

Sorry, but only HTML4 elements are supported unfortunatelly

Answer 3

| and # are new character entities from HTML5 specification.
& and ∑ are character entities from HTML4 specification (better visualised here).

JSX Rendering results show that character entities from only HTML4 specification are allowed.