{"patch":"diff --git a\/docs\/cookbook\/cb-03-if-else-in-JSX tip.md b\/docs\/cookbook\/cb-03-if-else-in-JSX tip.md\nnew file mode 100644\nindex 0000000000..6cee70bc53\n--- \/dev\/null\n+++ b\/docs\/cookbook\/cb-03-if-else-in-JSX tip.md\t\n@@ -0,0 +1,31 @@\n+---\n+id: if-else-in-JSX-tip\n+title: If-Else in JSX\n+layout: docs\n+permalink: inline-styles.html\n+script: \"cookbook\/inline-styles.js\"\n+---\n+\n+`if-else` statements don't work inside JSX, since JSX is really just sugar for functions:\n+\n+```html\n+\/** @jsx React.DOM *\/\n+\n+\/\/ this\n+React.renderComponent(

Hello World!<\/div>, mountNode);\n+\/\/ is the same as this\n+React.renderComponent(React.DOM.div({id:\"msg\"}, \"Hello World!\"), mountNode);\n+```\n+\n+Which means `

Hello World!<\/div>` doesn't make sense, as (if it worked) it would be compiled down to something like this `React.DOM.div({id: if (true){ 'msg' }}, \"Hello World!\")`, which isn't valid JS.\n+\n+What you're searching for is ternary expression:\n+\n+```html\n+\/** @jsx React.DOM *\/\n+\n+\/\/ this\n+React.renderComponent(

Hello World!<\/div>, mountNode);\n+```\n+\n+Try the [JSX compiler](http:\/\/facebook.github.io\/react\/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.\ndiff --git a\/docs\/cookbook\/cb-03-if-else-in-JSX.md b\/docs\/cookbook\/cb-03-if-else-in-JSX.md\nnew file mode 100644\nindex 0000000000..ac617c3631\n--- \/dev\/null\n+++ b\/docs\/cookbook\/cb-03-if-else-in-JSX.md\n@@ -0,0 +1,36 @@\n+---\n+id: if-else-in-JSX\n+title: If-Else in JSX\n+layout: docs\n+permalink: inline-styles.html\n+script: \"cookbook\/inline-styles.js\"\n+---\n+\n+### Problem\n+You want to use conditional in JSX.\n+\n+### Solution\n+Don't forget that JSX is really just sugar for functions:\n+\n+```html\n+\/** @jsx React.DOM *\/\n+\n+\/\/ this\n+React.renderComponent(

Hello World!<\/div>, mountNode);\n+\/\/ is the same as this\n+React.renderComponent(React.DOM.div({id:\"msg\"}, \"Hello World!\"), mountNode);\n+```\n+\n+Which means `

Hello World!<\/div>, mountNode);\n+```\n+\n+### Discussion\n+Try the [JSX compiler](http:\/\/facebook.github.io\/react\/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.\n","body":"","files":[{"path":"docs\/cookbook\/cb-03-if-else-in-JSX tip.md","status":"A"},{"path":"docs\/cookbook\/cb-03-if-else-in-JSX.md","status":"A"}],"commit":{"authorEmail":"chenglou92@gmail.com","revision":"0fad22512ac5cb56e400cadfeaafa02387282ec1","shortRevision":"0fad22512a","authorName":"Cheng Lou","subject":"new entry for ternary expression in jsx","authoredAt":"2013-09-27T02:21:47-04:00"},"parents":["4d9cde43be2335ab78615ab7715e323f8c04a933"]}

dillon1000/react

Files changed