Funky JSX Conditionals

Funky JSX Conditionals

// Good ol' ternary
<div>{condition ? <span /> : null}</div>


// AND
<div>{condition && <span />}</div>


// Multiple elements
<div>{condition ? [<span />, <span />] : null}</div>


// Text nodes
<div>{condition ? 'Hello ' + name + '!' : null}</div>


// Things get messy
<div>{condition ? [<span />, 'Hello ' + name + '!', <span />] : null}</div>


// Now it's just ugly
<div>
  {condition
    ? [
        (condition ? [<span />, 'My name is ' + name + '!', <span />] : null),
        'Hello ' + name + '!'
      ]
    : null}
</div>


// As a stateless component
<div>
  <listSpans condition={condition} />
</div>

function listSpans(props) {
  if (!props.condition) return null

  return [<span />, <span />]
}