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 https://github.com/facebook/jsx/pull/136

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!