The library for web and native user interfaces.
Cleanup "JSX Gotchas"
Paul O’Shannessy committed
Jul 16, 2013 at 23:27 UTC
5a3a39aba40f020e67a3caf533fdf04394d08bb2
1 file changed
+6
-2
docs/docs/02.2-jsx-gotchas.md
+6
-2
@@ -1,14 +1,16 @@
1
---
2
id: jsx-gotchas
3
-title: JSX gotchas
3
+title: JSX Gotchas
4
layout: docs
5
permalink: jsx-gotchas.html
6
prev: jsx-in-depth.html
7
next: interactivity-and-dynamic-uis.html
8
---
9
+
10
JSX looks like HTML but there are some important differences you may run into.
11
11
-## Whitespace removal
12
+
13
+## Whitespace Removal
14
15
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 `{' '}`.
16
@@ -18,6 +20,7 @@ JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes al
20
21
Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
22
23
+
24
## HTML Entities
25
26
You can insert HTML entities within literal text in JSX:
@@ -58,6 +61,7 @@ As a last resort, you always have the ability to insert raw HTML.
61
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
62
```
63
64
+
65
## Custom HTML Attributes
66
67
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-`.