Incorrect multi-line ternary operator indentation

[tvervest]

I ran into this issue while working with React views and ternary operators. If the react element is multi-lined, I wrap it in parentheses and put the element itself on an indented newline, for better readability.

However, when I do this I get a warning on the opening li tag, stating Expected indentation of 8 space characters, but found 10. (react/jsx-indent). Shouldn't this be correct? It seems very strange to me that the li element should be on the same depth as the ? character of the ternary operator.

Example:
Incorrect (according to standard):

const myElement = (
  <ul>
    {
      showX
        ? (
          <li>
            <h3>Value of X:</h3>
            <p>{x}</p>
          </li>
        )
        : null
    }
  </ul>
)

Correct (according to standard):

const myElement = (
  <ul>
    {
      showX
        ? (
        <li>
          <h3>Value of X:</h3>
          <p>{x}</p>
        </li>
        )
        : null
    }
  </ul>
)

[feross]

This looks like a bug in eslint-plugin-react. Can you re-open this issue there?

[tvervest]

Ah, you're right. Linking in yannickcr/eslint-plugin-react#454 for future reference.

[feross]

Cool, thanks for sharing that link.