react/jsx-indent with ternary and react fragment DON'T play nice 😕

[ThaBrad]

Conflicting rules in jsx-intend -->

{buttons
  .map((b, i) => (i === 2)
    ? <>
        <ThemedView/>
        <ImageButton/>
      </>
    : <ImageButton/>
)}

Tells me Expected indentation of 12 space characters but found 14 (for line 4+5) AND Expected indentation of 10 space characters but found 12 (line 6)

But:

1. 4+5 SHOULD be indented (and is normally just fine, even with fragment, when not in combination with ternary operator) --> I don't care about that, I can just bring them in line with opening fragment then it work, just wanted to mention
2. if I bring the react-fragment closing tag (line 6) to 10 spaces, it says Expected closing tag to match indentation of opening which it's auto-fix is to bring it in line with opening fragment (10->12), which just loops the error! --> conflicting rule in this case

[ThaBrad]

it's a tsx file (React-Native App) --> so typescript label (couldn't assign label myself in issue)

[ljharb]

This is how it should be indented:

{buttons
  .map((b, i) => (i === 2)
    ? (
        <>
          <ThemedView/>
          <ImageButton/>
        </>
      )
    : <ImageButton/>
)}

because many of the rules expect that multiline jsx is always parenthesized.

That said (assuming that workaround suffices), it would be reasonable to explore a way to make your OP pass.

[ThaBrad]

@ljharb thx man!

And yes, almost suffices, you solution gives me "one indentation too much" for the opening fragment (and then the following lines).

This does it -->

{buttons
  .map((b, i) => (i === 2)
    ? (
      <>
        <ThemedView/>
        <ImageButton/>
      </>
      )
    : <ImageButton/>
)}

But honestly, I don't like the extra sugar, bloaty in my opinion. Leaving this issue open till someone says no & closes for now …

[zypA13510]

#454 #1315 may be related?