Merge pull request facebook#4144 from lukehorvat/docs/iife-jsx

Add IIFE example to JSX documentation
super-rain · Jul 13, 2015 · 4d17841 · 4d17841
2 parents e9b3974 + 9a2e5f2
commit 4d17841
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/docs/tips/03-if-else-in-JSX.md b/docs/tips/03-if-else-in-JSX.md
@@ -33,8 +33,7 @@ That's not valid JS. You probably want to make use of a ternary expression:
 React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
 ```
 
-If a ternary expression isn't robust enough, you can use `if` statements to determine which
-components should be used.
+If a ternary expression isn't robust enough, you can use `if` statements outside of your JSX to determine which components should be used:
 
 ```js
 var loginButton;
@@ -49,7 +48,34 @@ return (
     <Home />
     {loginButton}
   </nav>
-)
+);
 ```
 
+Or if you prefer a more "inline" aesthetic, define [immediately-invoked function expressions](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) _inside_ your JSX:
+
+```js
+return (
+  <section>
+    <h1>Color</h1>
+    <h3>Name</h3>
+    <p>{this.state.color || "white"}</p>
+    <h3>Hex</h3>
+    <p>
+      {() => {
+        switch (this.state.color) {
+          case "red":   return "#FF0000";
+          case "green": return "#00FF00";
+          case "blue":  return "#0000FF";
+          default:      return "#FFFFFF";
+        }
+      }()}
+    </p>
+  </section>
+);
+```
+
+> Note:
+>
+> In the example above, an ES6 [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is utilized to lexically bind the value of `this`.
+
 Try using it today with the [JSX compiler](/react/jsx-compiler.html).