Multiline wrapping issues for JSX Parameters

Versions:

• prettier-eslint version: 12.0.0
• prettier-eslint-cli version: 5.0.1
• node version: 15.6.0
• yarn version: 1.22.10

Have you followed the debugging tips?

Yes

Relevant code or config

To Reproduce:

1. Clone this repo
2. Run yarn
3. Run yarn lint
4. Notice the changes in src/Foo.tsx

Relevant files / code:

eslintrc.js:

...
rules: {
  'react/jsx-max-props-per-line': [2, { maximum: 1 }],
  'react/jsx-indent-props': [2, 2],
  'react/jsx-first-prop-new-line': [2, 'multiline'],
   'react/jsx-wrap-multilines': [
      'error',
      {
        "declaration": "parens-new-line",
        "assignment": "parens-new-line",
        "return": "parens-new-line",
        "arrow": "parens-new-line",
      },
    ],
  ...
}
...

What I did:

Created this sample component with the above listed rules:

import React from 'react';

const Bar: React.FC<any> = () => <h1>testing</h1>;

const Foo: React.FC = () => {
  const fn = (element: React.ReactElement) => {};

  fn(<Bar propOne="propOne" propTwo="propTwo" />);

  const parentFn = (): void => fn(<Bar propOne="propOne" propTwo="propTwo" />);

  const element = <Bar propOne="propOne" propTwo="propTwo" />;

  return <h1>hello world</h1>;
};

export default Foo;

What happened:

Ran the command prettier-eslint --write 'src/**/*.{js,jsx,ts,tsx}' and got the following result:

import React from 'react';

const Bar: React.FC<any> = () => <h1>testing</h1>;

const Foo: React.FC = () => {
  const fn = (element: React.ReactElement) => {};

  fn(<Bar
    propOne="propOne"
    propTwo="propTwo"
  />);

  const parentFn = (): void => fn(<Bar
    propOne="propOne"
    propTwo="propTwo"
  />);

  const element = (
<Bar
  propOne="propOne"
  propTwo="propTwo"
/>
);

  return <h1>hello world</h1>;
};

export default Foo;

Suggested solution:

Ideally it would be better if jsx elements are returned on a new line when they are a function parameter. Also, I’m not sure what is wrong with the element declaration and the lack of indenting.

Ideal solution:

import React from 'react';

const Bar: React.FC<any> = () => <h1>testing</h1>;

const Foo: React.FC = () => {
  const fn = (element: React.ReactElement) => {};

  fn(
    <Bar
      propOne="propOne"
      propTwo="propTwo"
    />,
  );

  const parentFn = (): void => fn(
    <Bar
      propOne="propOne"
      propTwo="propTwo"
    />,
  );

  const element = (
    <Bar
      propOne="propOne"
      propTwo="propTwo"
    />
  );

  return <h1>hello world</h1>;
};

export default Foo;

[kylemh]

They did make a reproduction to be fair! Just need a new one 😛

[kylemh]

@jimmy-e can you see if this is still an issue? A lot has changed since OP. It could’ve been a prettier bug, an eslint bug, or it could still be a bug on our end.