jsx-wrap-multilines and conditional rendering

[psixdev]

Hi! What do you think about using conditional rendering in this form?

<div>
  <h1>Hello!</h1>
  {unreadMessages.length > 0 &&
    <h2>
      You have {unreadMessages.length} unread messages.
    </h2>
  }
</div>

(example from https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator)

Perhaps the rule should dictate a next style?

<div>
  <h1>Hello!</h1>
  {unreadMessages.length > 0 && (
    <h2>
      You have {unreadMessages.length} unread messages.
    </h2>
  )}
</div>

Now the first option will not lead to a warning. Even if it's right, what do you think about the first and second examples?

[ljharb]

I agree that this rule should enforce the second example. To make it non-semver-major, we'd need to add a new option conditional.

[jseminck]

Taking a look at this.

[jseminck]

Seems like this was added in another PR, hence closed my related PR.

To achieve this functionality, use the option: {logical: 'parens'} or {logical: 'parens-new-line'}.