Use a boolean condition for conditional rendering

When the left side of && in JSX is not a boolean, turn it into one, such as count > 0, or use a ternary that returns null.

Implementation

• Compare numbers explicitly, such as items.length > 0 instead of items.length.
• Convert other values with an explicit check, such as name !== '', or with Boolean(value) when truthiness is the intended test.
• && with a value that is already a boolean, such as isOpen && <Menu />, is fine.

Rationale

a && b evaluates to a when a is falsy. React renders false, null, and undefined as nothing, but it renders 0 and NaN as text, so a count of zero shows a stray "0".

Examples

Incorrect (counterexample):

function Badge({ count }: { count: number }) {
  return <div>{count && <span className="badge">{count}</span>}</div>;
}

When count is 0, the component renders <div>0</div>.

Correct:

function Badge({ count }: { count: number }) {
  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
}

Validation

Check each && in JSX whose left side has a number, string, or union type that includes them. A lint rule that flags non-boolean left operands in JSX can automate this.

&& with a boolean left side is not a violation.