entry on `false` behavior
Cheng Lou committed
Oct 23, 2013 at 16:08 UTC
c235ec74212d0e173002572c5023d0c74e57eb8b
2 files changed
+61
docs/cookbook/13-false-in-jsx tip.md
new
+29
@@ -0,0 +1,29 @@
1
+---
2
+id: false-in-jsx-tip
3
+title: False in JSX
4
+layout: cookbook
5
+permalink: initial-ajax.html
6
+prev: initial-ajax.html
7
+---
8
+
9
+Here's how `false` renders in different contexts:
10
+
11
+Renders as `id="false"`:
12
+```js
13
+/** @jsx React.DOM */
14
+React.renderComponent(<div id={false} />, mountNode);
15
+```
16
+
17
+String "false" as input value:
18
+```js
19
+/** @jsx React.DOM */
20
+React.renderComponent(<input value={false} />, mountNode);
21
+```
22
+
23
+No child:
24
+```js
25
+/** @jsx React.DOM */
26
+React.renderComponent(<div>{false}</div>, mountNode);
27
+```
28
+
29
+The reason why this one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && You have more than one item}</div>`.
docs/cookbook/13-false-in-jsx.md
new
+32
@@ -0,0 +1,32 @@
1
+---
2
+id: false-in-jsx
3
+title: False in JSX
4
+layout: cookbook
5
+permalink: initial-ajax.html
6
+prev: initial-ajax.html
7
+---
8
+
9
+### Problem
10
+How does `undefined` and `false` behave as attribute value and as child component?
11
+
12
+### Solution
13
+Renders as `id="false"`:
14
+```js
15
+/** @jsx React.DOM */
16
+React.renderComponent(<div id={false} />, mountNode);
17
+```
18
+
19
+String "false" as input value:
20
+```js
21
+/** @jsx React.DOM */
22
+React.renderComponent(<input value={false} />, mountNode);
23
+```
24
+
25
+No child:
26
+```js
27
+/** @jsx React.DOM */
28
+React.renderComponent(<div>{false}</div>, mountNode);
29
+```
30
+
31
+### Discussion
32
+The reason why the last one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && You have more than one item}</div>`.