One can use logical AND (&&) operator to conditionally render in React (aka short-circuit evaluation). myCondition && <MyElement /> will return <MyElement /> if myCondition is true and false otherwise. As React renders boolean values to nothing, when condition is false, nothing will be rendered as intended. But if the condition has a non-boolean value which evaluates to false (e.g. 0), that value will leak into the rendered result.

This rule will report when the condition has type number or bigint.

If React Native is used, the type string will also raise an error, as your render method will crash if you render 0, '', or NaN.

Note that along with short-circuit evaluation, in order to achieve conditional rendering it’s possible to use ternary operator (myCondition ? <MyElement /> : null), which is less error-prone in this case as both return values are explicit.

Noncompliant Code Example

function Profile(props) {
  return <div>
    <h1>{ props.username }</h1>
    { props.orders && <Orders /> } { /* Noncompliant, 0 will be rendered if no orders available */ }
  </div>
}

Compliant Solution

function Profile(props) {
  return <div>
    <h1>{ props.username }</h1>
    { props.orders > 0 && <Orders /> }
  </div>;
}

or

function Profile(props) {
  return <div>
    <h1>{ props.username }</h1>
    { props.orders ? <Orders /> : null }
  </div>;
}

See