Best practice regarding conditional JSX

There seems to be several schools regarding the way to write conditional JSX. React’s documentation suggests ternary expressions or functions, there are packages using using conditional tags, such as jsx-control-statement.

I settled with ternary when there’s not too much logic or when the components are not too big (I then fallback to functions), but ternary expressions can easily get hard to read, and the syntax/spacing really differs, a lot. You can find things without any () around elements, or with weird indentation, to things like that, which readable, feel a bit verbose:

 this.props.condition === 'blah' ? (
    <span>IfBlock</span>
  ) : (
    <span>ElseBlock</span>
  )

Do you folks have an opinion on that?

[ljharb]

Our current usage wavers between conditionally defining a variable above the jsx block (without any multiline ternaries whatsoever), or one of the following:

<div>
  {condition ? (<span />) : null}
  {condition ? (
    <div>
    </div>
  ) : null}
</div>

  {condition && (<span />)}
  {condition && (
    <div>
    </div>
  )}
</div>

The latter example looks cleanest, but it suffers from a footgun: if condition is zero, it will be toString’ed and rendered.

What would be ideal is if JSX had an operator like a ?? b which desugared to a == null ? a : b, but lacking that, and considering the footgun, I’m not sure what we should be recommending for JSX.

[otech47]

Well I tried googling “eslint indent multiline ternary react” and found nothing but madness. The indent rule for ESLint could use a couple more options but I want to throw out my preferred syntax out there to see if I’m the only crazy person who renders components this way:

<Foo/>
<Bar/>
{condition == true
    ?
        <FooBar
            prop={prop}
        />
    :
        <BarFoo
            prop={prop}
        />
}
<Baz/>