Bug: Unsupported HTML character references

[valtlai]

React does not support all the named character references, “entities”, defined in the HTML specification:

• Table: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references
• JSON: https://html.spec.whatwg.org/entities.json

React version: 18.2.0

Steps To Reproduce

Render the following demo component and compare the exepcteds character and the actual rendering results.

Code demo

const HTMLCharRefDemo = () => (
  <>
    <h1>Test: HTML character references in React</h1>
    <table>
      <thead>
        <tr>
          <th>Reference</th>
          <th>Expected character</th>
          <th>Actual rendering</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&amp;copy;</td>
          <td>©</td>
          <td>&copy;</td>
        </tr>
        <tr>
          <td>&amp;bemptyv;</td>
          <td>⦰</td>
          <td>&bemptyv;</td>
        </tr>
        <tr>
          <td>&amp;check;</td>
          <td>✓</td>
          <td>&check;</td>
        </tr>
        <tr>
          <td>&amp;bigstar;</td>
          <td>★</td>
          <td>&bigstar;</td>
        </tr>
        <tr>
          <td>&amp;NoBreak;</td>
          <td>{'\u2060'}</td>
          <td>&NoBreak;</td>
        </tr>
      </tbody>
    </table>
  </>
);

Link to code example: https://codepen.io/valtlai/pen/qBwYezG?editors=1010

The current behavior

React does not recognize some character references but renders them as is.

The expected behavior

React should recognize all the specced character references that end with a semicolon and render the characters they represent.

[XudayfiIbra]

i could not see that bug

[Yobro7292]

There are two approaches

1. Convert entities to their corresponding Unicode characters before rendering. You can create a utility function or use a library that handles these conversions
2. Use dangerouslySetInnerHTML

function MyComponent() {
  return (
    <div>
      Copy: ©, é: é
    </div>
  );
}

Or using dangerouslySetInnerHTML:

function MyComponent() {
  return (
    <div dangerouslySetInnerHTML={{__html: "Copy: &copy;, é: &eacute;"}}></div>
  );
}

[valtlai]

@Yobro7292 Yeah, I know these workarounds, but I still think React should support all the standard character references.

i could not see that bug

@XudayfiIbra The first row of the table in the demo is an example of a supported character reference: © gets printed as ©. The other rows represent unsupported character references: each reference, like ⦰, gets printed as is.

[XudayfiIbra]

@valtlai Oh i didn't notice that!

[pankajd24]

@check below code .

use html-entities for unsupported symbols .
refer website - https://tools.w3cub.com/html-entities

	```

Test: HTML character references in React

Reference	Expected character	Actual rendering
©	©	©
⦰	⦰	⦰
✓	✓	✓
★	★	⋆
⁠	{'\u2060'}	⁠

[nmain]

This is working as intended, see facebook/jsx#136