{"parents":["78da37da50586e98fd7f18eeed51f8efecfd8fe9"],"patch":"diff --git a\/docs\/tips\/03-if-else-in-JSX.md b\/docs\/tips\/03-if-else-in-JSX.md\nindex 33cb088dd6..684002483b 100644\n--- a\/docs\/tips\/03-if-else-in-JSX.md\n+++ b\/docs\/tips\/03-if-else-in-JSX.md\n@@ -33,8 +33,7 @@ That's not valid JS. You probably want to make use of a ternary expression:\n React.render(

Hello World!<\/div>, mountNode);\n ```\n \n-If a ternary expression isn't robust enough, you can use `if` statements to determine which\n-components should be used.\n+If a ternary expression isn't robust enough, you can use `if` statements outside of your JSX to determine which components should be used:\n \n ```js\n var loginButton;\n@@ -49,7 +48,34 @@ return (\n \n {loginButton}\n <\/nav>\n-)\n+);\n ```\n \n+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:\n+\n+```js\n+return (\n+

\n+

Color<\/h1>\n+

Name<\/h3>\n+
{this.state.color || \"white\"}<\/p>\n+

Hex<\/h3>\n+
\n+ {() => {\n+ switch (this.state.color) {\n+ case \"red\": return \"#FF0000\";\n+ case \"green\": return \"#00FF00\";\n+ case \"blue\": return \"#0000FF\";\n+ default: return \"#FFFFFF\";\n+ }\n+ }()}\n+ <\/p>\n+ <\/section>\n+);\n+```\n+\n+> Note:\n+>\n+> 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`.\n+\n Try using it today with the [JSX compiler](\/react\/jsx-compiler.html).\n","body":"","commit":{"authorEmail":"lukehorvat@gmail.com","shortRevision":"9a2e5f2cc5","revision":"9a2e5f2cc5386219f629da3cce6b01aa84bb3158","authoredAt":"2015-06-16T19:46:25+10:00","subject":"Add IIFE example to JSX documentation","authorName":"Luke Horvat"},"files":[{"path":"docs\/tips\/03-if-else-in-JSX.md","status":"M"}]}

Color<\/h1>\n+

Name<\/h3>\n+ {this.state.color || \"white\"}<\/p>\n+

Name<\/h3>\n+
{this.state.color || \"white\"}<\/p>\n+

dillon1000/react

Files changed