jsx-one-expression-per-line fix option inserts blank lines

[webOS101]

eslint-plugin-react 7.9.1

If the content of a tag contains only text, extra blank lines are inserted after the text (and the indentation is not correct). If the interior is a jsx expression, the output is correct.

	<div>
		<MyComponent>a</MyComponent>
		<MyOther>{a}</MyOther>
	</div>

results in:

	<div>
		<MyComponent>
a
		
		
		
		
		</MyComponent>
		<MyOther>
			{a}
		</MyOther>
	</div>

.eslintrc:

{
	"parser": "babel-eslint",
	"plugins": [
		"react",
		"babel"
	],
	"rules": {
		"indent": [1, "tab"],
		"react/jsx-one-expression-per-line": 1
	}
}

Note: If you leave out indent it does not insert the extra spaces following the string content but does not indent any of the fixed code.

[ljharb]

The indentation shouldn't need to be correct; the jsx-indent rule handles that (not the indent rule).

If you disable the indent rule, are the extra lines added?

[webOS101]

No, see the comment at the bottom. The result is this:

	<div>
		<MyComponent>
a
</MyComponent>
		<MyOther>
{a}
</MyOther>
	</div>

[webOS101]

Further note: using "react/jsx-indent": [1, "tab"], also results in the extra blank lines being inserted.

[CodingDive]

I had the same issue using prettier and prettier-eslint. Every time I saved, it created several new lines between the component and text.
Adding following line to my .eslintrc file fixed it for me.
"extends": ["prettier", "prettier/react"]

Below is my package.json since I'm not sure which package messed this up.

    "eslint": "5.5.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-babel": "5.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "7.11.1",
    "eslint-config-prettier": "3.0.1",
    "prettier": "1.14.2",
    "prettier-eslint": "8.8.2",
    "prettier-eslint-cli": "4.7.1"

[renaudbardet]

I am experiencing a similar problem:

<Button
  variant="outline-primary"
  onClick={auth.login}
>
  Login
</Button>

results in ESLint giving me
'Login' must be placed on a new line (react/jsx-one-expression-per-line)

--fix gives me a similar result to @webOS101

<Button
  variant="outline-primary"
  onClick={auth.login}
>

  Login
</Button>

and ESLint still complains
'Login' must be placed on a new line (react/jsx-one-expression-per-line)

If I wrap my content in a js string it works

<Button
  variant="outline-primary"
  onClick={auth.login}
>
  {'Login'}
</Button>

[saiichihashimoto]

This is still happening.

[ljharb]

@saiichihashimoto yep, that's why the issue's still open :-) it's got a "help wanted" label if you'd like to submit a PR to fix it.

[saiichihashimoto]

I got confused, I thought it was closed :-P

[dumbokitty]

Is there any update on this issue? I've met the same problem. I need to turn off this rule to pass the lint. : (

[ljharb]

Looks like it's since been fixed.