Skip to content

Commit ef47bb7

Browse files
committed
Merge pull request facebook#2076 from whatasunnyday/master
Add example to if else in JSX.
2 parents 4d9a2c4 + b9cf0d2 commit ef47bb7

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

docs/tips/03-if-else-in-JSX.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,25 @@ That's not valid JS. You probably want to make use of a ternary expression:
3939
React.renderComponent(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
4040
```
4141

42+
If a ternary expression isn't robust enough, you can use `if` statements to determine which
43+
components should be used.
44+
45+
```js
46+
/** @jsx React.DOM */
47+
48+
var loginButton;
49+
if (loggedIn) {
50+
loginButton = <LogoutButton />;
51+
} else {
52+
loginButton = <LoginButton />;
53+
}
54+
55+
return (
56+
<nav>
57+
<Home />
58+
{loginButton}
59+
</nav>
60+
)
61+
```
62+
4263
Try using it today with the [JSX compiler](/react/jsx-compiler.html).

0 commit comments

Comments
 (0)