diff --git a/tips/03-if-else-in-JSX.md b/tips/03-if-else-in-JSX.md index 02b4a409..5a04c9f6 100644 --- a/tips/03-if-else-in-JSX.md +++ b/tips/03-if-else-in-JSX.md @@ -7,25 +7,36 @@ prev: inline-styles.html next: self-closing-tag.html --- -`if-else` statements don't work inside JSX, since JSX is really just sugar for functions: +`if-else` statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example: ```js /** @jsx React.DOM */ -// this +// This JSX: React.renderComponent(
Hello World!
, mountNode); -// is the same as this + +// Is transformed to this JS: React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode); ``` -Which means `
Hello World!
` 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. +This means that `if` statements don't fit in. Take this example: + +```js +/** @jsx React.DOM */ + +// This JSX: +
Hello World!
+ +// Is transformed to this JS: +React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!"); +``` -What you're searching for is ternary expression: +That's not valid JS. You probably want to make use of a ternary expression: ```js /** @jsx React.DOM */ -React.renderComponent(
Hello World!
, mountNode); +React.renderComponent(
Hello World!
, mountNode); ``` -Try the [JSX compiler](/react/jsx-compiler.html). +Try using it today with the [JSX compiler](/react/jsx-compiler.html).