Eslint-plugin-react: [react/jsx-one-expression-per-line] moves text to the beginning of line

[lkazberova]

Hi! I tried to use "react/jsx-one-expression-per-line" rule, but its behaviour is very strange and I don't know how can I fix it.

Sandbox : https://codesandbox.io/s/gatsby-starter-default-f7u3w , please do npm run lint in terminal

My config .eslintrc.json

{
   "parserOptions": {
        "ecmaVersion": 10,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
        "react/jsx-one-expression-per-line": [2, { "allow": "none" }]
    }
}

Before running eslint --fix

    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>

After applying eslint

    <h1>
Hi people
</h1>
    <p>
Welcome to your new Gatsby site.
</p>
    <p>
Now go build something great.
</p>

[ljharb]

By itself it looks weird, but if you also enable the jsx-indent rule it will fix the indentation.

[lkazberova]

@ljharb thank you for a quick answer!
I changed my rules

    "rules": {
        "react/jsx-one-expression-per-line": [2, { "allow": "none" }],
        "react/jsx-indent": [2, 2]
    }

Unfortunately it doesn't work with plain text, but with tags - ok

Before running eslint --fix

    <h1>Hi people<button/></h1>

After applying eslint

    <h1>
Hi people
      <button/>
    </h1>

[yannickcr]

The fix instruction of react/jsx-one-expression-per-line will just add some line breaks between any expression that are on the same line. If you want the tags to be correctly indented aferward then you need to enable react/jsx-indent.

However react/jsx-indent do not re-indent text nodes (https://github.com/yannickcr/eslint-plugin-react/commit/798f2cab06be270f46843530040ab534512e221a).

That's why we're getting:

    <h1>
Hi people
      <button/>
    </h1>

instead of

    <h1>
      Hi people
      <button/>
    </h1>

Surely there is some room for improvements here.

[ljharb]

I would expect it to reindent text nodes.

[lkazberova]

@yannickcr @ljharb so it's a good reason for making PR 😃

[rfgamaral]

Here's one possible workaround until the issue is fixed:

Before running eslint --fix

<h1><React.Fragment>Hi people</React.Fragment><button/></h1>

After applying eslint

<h1>
  <React.Fragment>Hi people</React.Fragment>
  <button/>
</h1>

You can read more about React Fragments here if you don't know about them. But basically, the final rendered DOM tree will be like this:

<h1>
  Hi people
  <button/>
</h1>

You don't have to worry about <React.Fragment> adding an additional DOM element.

[rodomeista]

Bumping this thread - are there any intentions to resolve this issue? Having to write react fragments to properly support this feature seems a bit excessive, especially for devs who aren't sure why fragments are being used.

[ljharb]

Yes, it should be fixed somehow. A PR with failing test cases would be a great start.