Prefer Ternary Conditional Rendering

SuggestionAuto-fixable

small-rules/prefer-ternary-conditional-rendering

Prefer ternary expressions over complementary JSX && branches.

Diagnostic Messages

preferTernaryConditionalRendering

Use a single ternary expression instead of complementary JSX && branches.

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/prefer-ternary-conditional-rendering": "error"
  }
}

Examples

Paired conditional JSX branches

function Component({ gradient, gradientToUse, rarityStyle }) {
    return <>{gradient !== undefined && <uigradient key="ui-gradient" Color={gradient} />}{gradient === undefined && <AnimatedGradient key="animated-gradient" colorValue={gradientToUse} rotation={45} sweepingSpeed={rarityStyle?.sweepingSpeed ?? 0} />}</>;
}

After auto-fix

function Component({ gradient, gradientToUse, rarityStyle }) {
    return <>{gradient !== undefined ? <uigradient key="ui-gradient" Color={gradient} /> : <AnimatedGradient key="animated-gradient" colorValue={gradientToUse} rotation={45} sweepingSpeed={rarityStyle?.sweepingSpeed ?? 0} />}</>;
}

Explicit JSX ternary

function Component({ flag }) { return <>{flag ? <A /> : <B />}</>; }