React: Inline If with Logical && Operator

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

The version of ESLint you are using. 5.6.0

The problem you want to solve. Passing eslint without ignore and not outputting random numbers.

If I do:

{item.url.length && (
  <a href={item.url}>
    {item.title}
  </a>
)}
{!item.url.length && (
  <span
    style={this.getStyleItemText()}
    onClick={this.onItemClick}
    onKeyDown={this.onItemClick}
    role="button"
    tabIndex={0}
  >
    {item.title}
  </span>
)}

Result: when false it outputs the length in the dom, in this case 0.

If I do:

{item.url.length && (
  <a href={item.url}>
    {item.title}
  </a>
) || ''}
{!item.url.length && (
  <span
    style={this.getStyleItemText()}
    onClick={this.onItemClick}
    onKeyDown={this.onItemClick}
    role="button"
    tabIndex={0}
  >
    {item.title}
  </span>
) || ''}

Result: error Unexpected mix of '&&' and '||' no-mixed-operators

Your take on the correct solution to problem. Somehow allow mixing of operators in Inline If Logical statements

Are you willing to submit a pull request to implement this change? Not sure if I am able and will have time 😕

[platinumazure]

Glad you figured it out @OZZIE!

For anyone else who stumbles on this thread: You can use parentheses to avoid the rule flagging an issue. Additionally, it’s possible to configure the rule to indicate that && and || should not be flagged as mixed operators. See the rule documentation for more information.

[OZZlE]

problem was that if item.url.length was 0 then it’s falsy so the part after the && won’t execute and the {} gets the 0 so it outputs it. By using !! it converts the zero into boolean false which won’t be outputted