Skip to content

react/jsx-indent not working when using string literal as a child #1136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dnalborczyk opened this issue Mar 31, 2017 · 7 comments · Fixed by #2542
Closed

react/jsx-indent not working when using string literal as a child #1136

dnalborczyk opened this issue Mar 31, 2017 · 7 comments · Fixed by #2542

Comments

@dnalborczyk
Copy link

eslint 3.19.0, eslint-plugin-react 6.10.3

setting:

rules
  react/jsx-indent: [ error, 2 ]

minimal test using a string literal which causes no error:

(
  <div>
  1
  <div>Car</div>
  </div>
)

expected this to be correct:

(
  <div>
    1
    <div>Car</div>
  </div>
)

though the error is correctly thrown when you are using an expression:

(
  <div>
  {`1`}
  <div>Car</div>
  </div>
)
22:3  error  Expected indentation of 4 space characters but found 2  react/jsx-indent
23:3  error  Expected indentation of 4 space characters but found 2  react/jsx-indent
@dnalborczyk dnalborczyk changed the title react/jsx-indent not working when string literal is a child react/jsx-indent not working when string literal as a child Mar 31, 2017
@dnalborczyk dnalborczyk changed the title react/jsx-indent not working when string literal as a child react/jsx-indent not working when using string literal as a child Mar 31, 2017
@noah-potter
Copy link

There is a test that enforces this behavior: https://github.com/yannickcr/eslint-plugin-react/blob/d672588cc39334e215ff5993f859f159fc977d57/tests/lib/rules/jsx-indent.js#L198
Is this an actual bug or is there a reason this behavior is desired?

@ljharb
Copy link
Member

ljharb commented Oct 12, 2017

That test was removed here: 6e5f688#diff-93c6a0eb3f976d39af0b0a8843ddba24L215

and then restored here: e9fb52d#diff-93c6a0eb3f976d39af0b0a8843ddba24R215

Intentional or not, this feels like a flaw in the rule - literals should have their indentation enforced just like anything else.

@noah-potter
Copy link

@ljharb Great. I'll look into fixing this

@march08
Copy link

march08 commented Aug 11, 2018

hey guys, has this been resolved?

@ljharb
Copy link
Member

ljharb commented Aug 11, 2018

It's still open, so I don't think so.

@alexzherdev
Copy link
Contributor

According to discussion in #1662 (comment) this can get tricky with elements like pre. Looks like these two are duplicates.

@damianobarbati
Copy link

Any solution for this?

ljharb pushed a commit to toshi-toma/eslint-plugin-react that referenced this issue Jan 16, 2020
ljharb pushed a commit to toshi-toma/eslint-plugin-react that referenced this issue Jan 28, 2020
ljharb pushed a commit to toshi-toma/eslint-plugin-react that referenced this issue Feb 1, 2020
@ljharb ljharb closed this as completed in ffdf69a Feb 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

6 participants