Browse Source

entry on `false` behavior

main
Cheng Lou 11 years ago
committed by Connor McSheffrey
parent
commit
7f14b38499
  1. 29
      cookbook/13-false-in-jsx tip.md
  2. 32
      cookbook/13-false-in-jsx.md

29
cookbook/13-false-in-jsx tip.md

@ -0,0 +1,29 @@
---
id: false-in-jsx-tip
title: False in JSX
layout: cookbook
permalink: initial-ajax.html
prev: initial-ajax.html
---
Here's how `false` renders in different contexts:
Renders as `id="false"`:
```js
/** @jsx React.DOM */
React.renderComponent(<div id={false} />, mountNode);
```
String "false" as input value:
```js
/** @jsx React.DOM */
React.renderComponent(<input value={false} />, mountNode);
```
No child:
```js
/** @jsx React.DOM */
React.renderComponent(<div>{false}</div>, mountNode);
```
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>`.

32
cookbook/13-false-in-jsx.md

@ -0,0 +1,32 @@
---
id: false-in-jsx
title: False in JSX
layout: cookbook
permalink: initial-ajax.html
prev: initial-ajax.html
---
### Problem
How does `undefined` and `false` behave as attribute value and as child component?
### Solution
Renders as `id="false"`:
```js
/** @jsx React.DOM */
React.renderComponent(<div id={false} />, mountNode);
```
String "false" as input value:
```js
/** @jsx React.DOM */
React.renderComponent(<input value={false} />, mountNode);
```
No child:
```js
/** @jsx React.DOM */
React.renderComponent(<div>{false}</div>, mountNode);
```
### Discussion
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>`.
Loading…
Cancel
Save