jsx-indent-props fails on lines following preceding operator

[jonvuri]

Example, with rule setting:

  react/jsx-indent-props:
    - error
    - 2

and source file:

import React from 'react'

const SpanElement = () => {
  const span = true
    ? <span
        attr='value'
      />
    : <span
        attr='otherValue'
      />

  return span
}

export default SpanElement

eslint gives output:

./SpanElement.jsx
  6:9   error  Expected indentation of 6 space characters but found 8  react/jsx-indent-props
  9:9   error  Expected indentation of 6 space characters but found 8  react/jsx-indent-props

I would expect it to understand that the indent is increased by the preceding operator on the line above.

[jonvuri]

Any update on this? Also, the same issue appears with jsx-indent.

[babsonmatt]

Just came across this issue as well

[AoDev]

Same here and I just want to add that using && does work properly. (in eslint-plugin-react: 6.10.0) with jsx-indent.

// Ternary fails
{store.isLoading
  ? <Something/>
  : <MyComponent
    someProp={someProp}
    otherProp={otherProp}/>
}

// && passes
{store.isLoading &&
  <MyComponent
    someProp={someProp}
    otherProp={otherProp}/>
}

[Moong0122]

I will take a look this issue

[Moong0122]

@ljharb I sent a PR, can you confirm if it worked?