Eslint-plugin-react: Feature request: "allowTernary" option for react/jsx-wrap-multilines

[zorzysty]

I propose to add an option to react/jsx-wrap-multilines rule that would make this code valid:

const header = this.props.header
  ? <HeaderElement
      className="myclass myclass2"
      isExpanded={this.state.isExpanded}
  >
    {this.props.header}
  </HeaderElement>
  : null;

There is no real gain from adding parentheses here. It doesn't improve readability, but adds extra noise:

const header = this.props.header
  ? (
    <HeaderElement
      className="myclass myclass2"
      isExpanded={this.state.isExpanded}
    >
      {this.props.header}
    </HeaderElement>
  )
  : null;

or even worse:

const header = this.props.header
  ? (<AccordionElement
    className="myclass myclass2"
    isExpanded={this.state.isExpanded}
  >
    {this.props.header}
  </AccordionElement>)
  : null;

Right now to make omitting parentheses possible I need to switch off both "assignment" and "declaration" options, but because of this I'm loosing errors for code like this:

const header =
  <div>
    xyz
  </div>;

which I believe is much better with parentheses:

const header = (
  <div>
    xyz
  </div>
);

[ljharb]

This is how I'd indent your code:

const header = this.props.header ? (
  <HeaderElement
      className="myclass myclass2"
      isExpanded={this.state.isExpanded}
  >
    {this.props.header}
  </HeaderElement>
 ) : null;

Does that example help?

[zorzysty]

Yeah, it's better, but it is still conflicting with prettier, which opts for this kind of formatting for ternaries:

const header = this.props.header
  ? <ElementRenederedWhenTrue />
  : <ElementRenederedWhenFalse />;

And i'm just trying to make Airbnb ESlint rules work with prettier. Here's analogical issue I reported for prettier: https://github.com/prettier/prettier/issues/1009#issuecomment-286833002

[ljharb]

Airbnb won't be changing any of our eslint rules to match prettier; all our rules are the way they are for a reason.

The latter example your posted is just fine, because the jsx is single-line. Airbnb's style guide (and this rule) requires parens around multiline ternaries only.

[zorzysty]

Yes, I get that Airbnb won't change the rules, but I can override them so they will work with prettier.
Unfortunately to override this particular one I need to switch off both "assignment" and "declaration", which is a shame. If there was an option to switch off requiring parens just for multiline ternaries a lot more cases would be covered.

Edit:
To be consistent with no-unused-expressions this option should be named "allowTernary"