Reactjs: CJSX Nested Conditionals - reactjs

Question

What is the correct syntax to handle nested conditional logic in a React component?
React.createClass
render: ->
<div>
{if #props.showList
{for item in #props.myItems
{item}
}
else
}
</div>
The for loop (on its own) can be rendred; the if/else conditional (on its own) can be rendered. However, nesting the for loop inside the conditional fails.
Any help would be very much appreciated.

Answer 1

I haven't tested it, but based on how normal JSX works you only need the {expression} thing to escape from JSX mode.
The program starts in JS mode (or CS here), and when an element tag is encountered it enters JSX mode. Using {foo} in JSX mode causes it to go back to JS mode. From there the above rules apply, and you can re-enter JSX mode by starting a tag, and so on.
render: ->
<div>
{
if #props.showList
for item in #props.myItems
item
else
<div>{foo}</div>
}
</div>
With annotations:
CoffeeScript:
render: ->
JSX within CoffeeScript
<div>
CoffeeScript within JSX within CoffeeScript
{
if #props.showList
for item in #props.myItems
item
else
JSX within CoffeeScript within JSX within CoffeeScript
<div>
CoffeeScript within JSX within CoffeeScript
{foo}
JSX within CoffeeScript
</div>
JSX within CoffeeScript
}
</div>
CoffeeScript
...

Answer 2

Inside the {} sections you can just use normal Coffeescript/CJSX code, as long as it evaluates to a single expression:
React.createClass
render: ->
<div>
{
if #props.showList
for item in #props.myItems
<span key={item.id}>{item}</span>
else
<span>some other content</span>
}
</div>