Eslint-plugin-react: Can't seem to properly indent ? : statements

[0x80]

In our codebase we use quite a bit of this type of if/else rendering:

      {
          condition
          ? <div>
              <div> something </div>
            </div>
          : <div>
              <div> something </div>
            </div>
        }

Whatever indentation I try I always seem to get a jsx-indent error. Is there a way to format this without the linter complaining?

[yannickcr]

Seems related to #540

[jrajav]

540 has been closed - did it fix this? There was no test for it.

[ljharb]

{condition ? (
  <div>
    <div> something </div>
  </div>
) : (
  <div>
    <div> something </div>
  </div>
)}

or

{condition
  ? (
    <div>
      <div> something </div>
    </div>
  )
  : (
    <div>
      <div> something </div>
    </div>
  )
}

?

[jrajav]

Neither -

{condition
  ? <div>
      <div> something </div>
    </div>
  : <div>
      <div> something </div>
    </div>
}

[ljharb]

Right, I'm suggesting two forms that should satisfy the rule.

If those work, and your example doesn't, then it seems like an issue when parens are omitted.

[jrajav]

Is this ever going to get fixed? To this day, still have to keep jsx-indent turned off because this doesn't work as expected (or at least have an option).

[jrajav]

Made a new issue since @ljharb perhaps indicated it's an issue with lacking parens (but that seems like it should be a valid use case?).

[ljharb]

To clarify, I think it should be a supported use case, but I don't think it's a good style :-)

[jrajav]

@ljharb Thanks for the clarification! That's good to hear. In your opinion should it be the default (when parens are omitted, that is) or an added option?

[ljharb]

I think that the default should be identical when parens are omitted or not - iow, delete the parens out of https://github.com/yannickcr/eslint-plugin-react/issues/625#issuecomment-253309000 for the style without them.

The more compact style requested here should be an option (not the default)