Cara menggunakan html entities not rendering

JSX Gotchas Edit on GitHub

JSX looks like HTML but there are some important differences you may run into.

Note:

For DOM differences, such as the inline style attribute, check here.

HTML Entities #

You can insert HTML entities within literal text in JSX:

<div>First &middot; Second</div>

If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.

// Bad: It displays "First · Second"
<div>{'First &middot; Second'}</div>

There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.

<div>{'First · Second'}</div>

A safer alternative is to find the unicode number corresponding to the entity and use it inside of a JavaScript string.

<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

You can use mixed arrays with strings and JSX elements.

<div>{['First ', <span>&middot;</span>, ' Second']}</div>

As a last resort, you always have the ability to insert raw HTML.

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

Custom HTML Attributes #

If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with data-.

<div data-custom-attribute="foo" />

Web Accessibility attributes starting with aria- will be rendered properly.

<div aria-hidden={true} />

Reserved characters in HTML must be replaced with character entities.

HTML Entities

Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

&entity_name;

OR

&#entity_number;

To display a less than sign (<) we must write: &lt; or &#60;

Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for entity numbers is good.

Non-breaking Space

A commonly used entity in HTML is the non-breaking space: &nbsp;

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

• § 10
• 10 km/h
• 10 PM

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the &nbsp; character entity.

Tip: The non-breaking hyphen (&#8209;) is used to define a hyphen character (‑) that does not break into a new line.

Some Useful HTML Character Entities

Note: Entity names are case sensitive.

Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter.

Some diacritical marks, like grave (  ̀) and acute (  ́) are called accents.

Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

You will see more HTML symbols in the next chapter of this tutorial.