Add example to if else in JSX.
Sunny Juneja committed
Aug 20, 2014 at 11:43 UTC
b9cf0d2bddf451167a8c8ea82b3f2d81c2a66935
1 file changed
+21
docs/tips/03-if-else-in-JSX.md
+21
@@ -39,4 +39,25 @@ That's not valid JS. You probably want to make use of a ternary expression:
39
React.renderComponent(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
40
```
41
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
+
63
Try using it today with the [JSX compiler](/react/jsx-compiler.html).