Avoid && short circuit in JSX Has Fix

• Playground Link

Description

In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators. However, you should almost never put numbers on the left side of &&. This is because React will render the number 0, instead of the JSX element on the right side. A concrete example will be conditionally rendering a list when the list is not empty.

This rule will find and fix any short-circuit rendering in JSX and rewrite it to a ternary operator.

YAML

id: do-what-brooooooklyn-said
language: Tsx
rule:
  kind: jsx_expression
  has:
    pattern: $A && $B
  not:
    inside:
      kind: jsx_attribute
fix: "{$A ? $B : null}"

Example

<div>{ list.length && list.map(i => <p/>) }</div>

Diff

<div>{ list.length && list.map(i => <p/>) }</div> 
<div>{ list.length ?  list.map(i => <p/>) : null }</div> 

Contributed by

Herrington Darkholme, inspired by @Brooooook_lyn