react.dev/docs/jsx-is-not-html.md

id	title	description	layout	prev
docs-jsx-is-not-html	JSX is not HTML	Differences between JSX and HTML.	docs	api.html

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

Whitespace removal

JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add {' '}.

<div>{this.props.name} {' '} {this.props.surname}</div>

Follow Issue #65 for discussion on this behavior.

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'}} />

Comments

JSX supports both single-line and multi-line JavaScript comments within a tag declaration:

<div // This is a single-line comment:
    /*
        And a multi-line
        comment
    */
/>

As of React 0.3, there is no good way to insert comments within the children section. Issue #82 is tracking progress to enable the following:

// Note: This is not implemented yet!
<div>
  {/* This is a comment */}
</div>

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} />