react/jsx-one-expression-per-line

There’s a bug with the --fix part of this rule when you have plain text inside of the jsx element.

Original code:

const something = () => (
  <Text>Plain text</Text>
)

Result of eslint --fix:

const something = () => (
  <Text>
Plain text
  </Text>
)

Expected result:

const something = () => (
  <Text>
    Plain text
  </Text>
)

[temowemo]

It looks like neither indent nor react/jsx-indent can perform the proper indentation in this case unless you wrap “Plain Text” in brackets and quotes like so:

ESLint Rules:

"react/jsx-one-expression-per-line": "error",
"react/jsx-indent": ["error", 2]

Original code:

const something = () => (
  <Text>{"Plain text"}</Text>
)

Result of eslint --fix:

const something = () => (
  <Text>
    {"Plain text"}
  </Text>
)

So while the react/jsx-one-expression-per-line rule should definitely not be expected to perform indentation, maybe react/jsx-indent should handle this indentation problem?

[ljharb]

The only fix, besides someone submitting a PR here, is disabling the rule for the time being.