From c6fe815d6525435ab267b9d1c82967963c5355ea Mon Sep 17 00:00:00 2001 From: Luke Horvat Date: Tue, 16 Jun 2015 19:46:25 +1000 Subject: [PATCH] Add IIFE example to JSX documentation --- tips/03-if-else-in-JSX.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/tips/03-if-else-in-JSX.md b/tips/03-if-else-in-JSX.md index 33cb088d..68400248 100644 --- a/tips/03-if-else-in-JSX.md +++ b/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(
Hello World!
, 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 ( {loginButton} -) +); ``` +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 ( +
+

Color

+

Name

+

{this.state.color || "white"}

+

Hex

+

+ {() => { + switch (this.state.color) { + case "red": return "#FF0000"; + case "green": return "#00FF00"; + case "blue": return "#0000FF"; + default: return "#FFFFFF"; + } + }()} +

+
+); +``` + +> 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).