prefer-ternary-conditional-rendering

Reports sibling JSX && branches when the conditions are logical opposites and can be written as one ternary.

Rule details Suggestion

The rule looks at adjacent JSX expression containers, ignoring whitespace-only JSX text between them.

It reports pairs like these:

• flag && <A /> and !flag && <B />
• mode === "x" && <A /> and mode !== "x" && <B />
• the same strict comparison with the operands swapped

The fixer is narrower than the report. It only rewrites pairs when the condition is safe to reuse directly in a ternary:

• negation pairs built from an identifier, this, or a literal
• strict comparison pairs where both sides are identifiers, this, or literals

Reported without a fix

Pairs like isReady() && <A /> and !isReady() && <B /> are still reported, but there is no auto-fix.

Examples

Incorrect

function Component({ flag, mode }) {
  return (
    <>
      {flag && <A />}
      {!flag && <B />}
      {mode === "x" && <Primary />}
      {mode !== "x" && <Fallback />}
    </>
  );
}

Correct

function Component({ flag, mode }) {
  return (
    <>
      {flag ? <A /> : <B />}
      {mode === "x" ? <Primary /> : <Fallback />}
    </>
  );
}

What gets skipped

• non-adjacent branches
• pairs separated by real JSX content, not just whitespace
• && expressions whose right side is not a JSX element or fragment
• unrelated conditions like first && <A /> and second && <B />

Related rules

use-hook-at-top-level Keeps hook calls in predictable places

prefer-read-only-props Prevents prop mutation in React components