Skip to content

Commit b9cf0d2

Browse files
author
Sunny Juneja
committed
Add example to if else in JSX.
1 parent 2058ad9 commit b9cf0d2

1 file changed

Lines changed: 21 additions & 0 deletions

File tree

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)