Description
The one good example
Conditionals are currently solved with the ternary ?: or && + || and actually works surprisingly well. However, what can be returned by them is another story.
The academic textbook example works great:
<div>
{condition ?
<span></span>
: null}
</div>
or
<div>
{condition &&
<span></span>
}
</div>
Looks pretty good, works great.
Any other is a disaster
But in order to return 2+ tags you need to return an array, which also requires that you separate them by commas (good bye beautiful JSX):
<div>
{condition ?
[
<span></span>,
<span></span>
]
: null}
</div>
If you want a text-node instead then you have to actually rewrite your JSX-style code to pure JavaScript instead, which is perhaps even worse:
<div>
{condition ?
'My name is ' + name + '!'
: null}
</div>
Let's also do the complete version, a text-node surrounded by tags, whitespace rules fly out the window and it no longer looks anything like JSX:
<div>
{condition ?
[
<span></span>,
'My name is ' + name + '!',
<span></span>
]
: null}
</div>
And while we're at it, if there are nested ifs then it looks like this, so let's go all out ugly, despite how simple it really should be:
<div>
{condition ?
[
(condition ?
[
<span></span>,
'My name is ' + name + '!',
<span></span>
]
: null),
'Hello ' + name + '!'
]
: null}
</div>
That is barely even understandable code. When without conditionals it would look like this:
<div>
<span></span>
My name is {name}!
<span></span>
Hello {name}!
</div>
So in my opinion, something is clearly wrong here, adding a conditionals should never require you to be working with arrays and rewriting inline text to use JavaScript string literals instead, or in general require you to massacre your code.
The problem(s)
Multiple tags
The easy part problem is simply that we currently cannot return more than one tag before having to resort to arrays. Intuitively this should be relatively easy to fix in JSX by simply automatically wrapping such as arrays. Simple, intuitive and good output?
Conditionals
While it may not be a big deal, it's weird that the syntax for an if-statement <tag>{cond ? true : false }</tag> is different from a nested if <tag>{cond ? (cond ? true : false) : false}</tag> (braces replaced with parenthesis, because we're already in an expression) and it's back to braces if it's inside a tag <tag>{cond ? <tag>{cond ? true : false}</tag> : false}</tag>.
Text and expressions
The last big issue is that we can transition from JS to JSX-HTML by adding a root tag <tag></tag>, but we cannot transition directly to JSX-text and JSX-expressions My name is {name}! without it being wrapped in a tag <tag>My name is {name}!</tag> or without being rewritten to plain JavaScript 'My name is ' + name + '!'. Which is necessary because conditionals are currently implemented as expressions.
Solutions
New conditional syntax
So it seems to me like the root of the problem is that conditionals are implemented as JSX expressions, which also causes the problem with having to rewrite JSX text/expressions when adding conditionals unless they are wrapped by tags. If they did not piggyback on JSX expressions then everything but non-parented JSX text/expressions would be solved, and really, that's not an issue at all.
Nesting of JSX expressions
Another solution is to allow JSX-expressions to be nested <tag>{cond ? {cond ? true : false} : false}</tag>, JSX text/expressions inside conditionals will still be a problem, but that could reasonably be solved by backtick strings <tag>{cond ? My name is {name}! : null}</tag>.
Or...
Or do you think there are better ways one should use to structure the code? Am I missing something?
I realize that this perhaps is approaching it from the perspective of old-style templates, but from where I'm standing now, these things seem to make it quite cumbersome in more complex situations... there are a lot of situations in which one has to change surrounding code simply because one added a tag, or because one removed a tag... or moved a conditional.
PS. We had some discussion in the chat, and I agree that most of this is probably just "old-school template habits", however, returning multiple tags is biting me in the ass a lot. While everything content inside conditionals could be wrapped in divs/spans to make it play nice, it seems weird to have to add markup just to be able to write reasonable JSX.