tslint-react: jsx-wrap-multiline false positives

I think the case below should not cause error:

https://github.com/ant-design/ant-design-mobile/blob/master/components/accordion/demo/basic.tsx#L13

components/accordion/demo/basic.tsx[13, 9]: Multiline JSX elements must be wrapped in parentheses

// bad
const button = <button type="submit">
    Submit
</button>;
// good
const button = (
    <button type="submit">
        Submit
    </button>
);

// why this is bad ? any reason we need wrap inner button with parentheses?
const button = (
   <div>
       <button type="submit">
          Submit
      </button>
   <div>
);

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (7 by maintainers)

Commits related to this issue

disabled jsx-wrap-multiline from tslint-react because of false positives and being unmaintained (and being incompatible with prettier) - https://github.com/palantir/tslint-react/pull/194#issuecomment... — committed to ovos/coding-standard by falkenhawk 5 years ago

Most upvoted comments

Another repro using React 16.2:

return (
  <>
    <div>One</div>
    <div>Two</div>
  </>
)

wichert on Dec 29, 2017

more false positives I’ve found:

return [
    <button type="submit">
        Submit
    </button>,
    <button type="button">
        Cancel
    </button>
];

adidahiya on Mar 28, 2017

Problem is that the 4.0.0 release of tslint-react no longer permits the standard prettier formatting for the reactDom.render() example, whereas they worked fine together in tslint-react 3.6.0.

Prettier removes any brackets around the JSX in the first parameter for reactDom.render, so it is not possible for:

 render(
  <ApolloProvider client={client}>
    <Router history={history}>
      <App />
    </Router>
  </ApolloProvider>,
  document.querySelector('main') as HTMLElement,
);

to be written as

render((
    <ApolloProvider client={client}>
      <Router history={history}>
        <App />
      </Router>
    </ApolloProvider>
  ),  document.querySelector('main') as HTMLElement,
);

when using prettier like tslint 4.0.0 now wants it to be. Can whatever was changed between those two versions for this particular rule & case please be reverted?

dawnmist on Apr 15, 2019

the array false positive @adidahiya mentioned above has forced me to disable this rule… we use that pattern everywhere.

giladgray on Jul 24, 2017

render(
  <ApolloProvider client={client}>
    <Router history={history}>
      <App />
    </Router>
  </ApolloProvider>,
  document.querySelector('main') as HTMLElement,
);

Here’s the code that throws false positive jsx-wrap-multiline for me.

evenfrost on Mar 27, 2019

tslint-react had this rule before prettier was widely used in the typescript ecosystem and before we started using prettier in Palantir projects. all the code formatting rules in tslint & tslint-react are “legacy” rules in that sense; they are not guaranteed to play nicely with prettier. if you use tslint-config-prettier (the recommended configuration approach), you should have all formatting rules disabled in favor of prettier.

adidahiya on Apr 15, 2019