From 1d9ee9dcdb56e0e278bc19ee78e4da83096c685a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Mon, 13 Jul 2015 14:01:51 -0700
Subject: [PATCH] Merge pull request #4144 from lukehorvat/docs/iife-jsx

Add IIFE example to JSX documentation
(cherry picked from commit 4d178415e815f13f8f97698b6b8a489f07d721d5)
---
 docs/tips/03-if-else-in-JSX.md | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/docs/tips/03-if-else-in-JSX.md b/docs/tips/03-if-else-in-JSX.md
index 33cb088dd6..684002483b 100644
--- 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).