JSX conditionals requires a lot of workarounds a lot of the time

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.

[atticoos]

I’ve seen a lot of React components that aim to introduce control flow behavior, but I personally prefer to keep those pieces functional and as part of the language. This is just a personal preference, I think the component based approaches mentioned above are fantastic pieces of work.

I just published a really simple function that can be used to compose conditional render blocks. https://github.com/ajwhite/render-if

It’s pretty much what you might expect, predicate => element => predicate && element

As an in-line expression

class MyComponent extends Component {
  render() {
    return (
      {renderIf(1 + 2 === 3)(
        <span>The universe is working</span>
      )}
    );
  }
}

As a named function

class MyComponent extends Component {
  render() {
    const ifTheUniverseIsWorking = renderIf(1 + 2 === 3);
    return (
      {ifTheUniverseIsWorking(
        <span>The universe is still wroking</span>
      )}
    )
  }
}

As a composed function

const ifEven = number => renderIf(number % 2 === 0);
const ifOdd = number => renderIf(number % 2 !== 0);

class MyComponent extends Component {
  render() {
    return (
      {ifEven(this.props.count)(
        <span>{this.props.count} is even</span>
      )}
      {ifOdd(this.props.count)(
        <span>{this.props.count} is odd</span>
      )}
    );
  }
}

Or just vanilla

const ifEven = number => element => elseElement => {
  if (number % 2 === 0) return element;
  return elseElement;
}

class MyComponent extends Component {
  render() {
    return (
      {ifEven(this.props.count)(
        <span>{this.props.count} is even</span>
      )(
        <span>{this.props.count} is odd</span>
      )}
    );
  }
}

The main goal for me was to stay flexible and composable. I feel that this solved the issue I was seeking. It doesn’t

[stoeffel]

If anyone is interested, I just released a module for conditional rendering. Feedback is more than welcome. https://github.com/stoeffel/react-cond