AbsoluteJS

absolute/no-or-none-component

Prefer the logical && operator over a ternary with null/undefined for conditional JSX rendering.

React & JSXSuggestion
View on GitHub

#Rule Details

Prefers the && short-circuit over a ternary whose alternate is null/undefined for conditional JSX. {cond && <X />} expresses "render X when cond" more directly than {cond ? <X /> : null}, with less to read.

The rule only fires on a ternary used as a JSX child (inside an expression container that is not a prop) whose alternate is exactly null or undefined. Ternaries with a real alternate, ternaries used as prop values, and false/0 alternates are left alone. There is intentionally no autofix, to avoid conflicting with react/jsx-no-leaked-render.

#Examples

Incorrect
TSX
const Panel = () => <div>{isOpen ? <Modal /> : null}</div>;
const Panel2 = () => <div>{isOpen ? <Modal /> : undefined}</div>;
Correct

Logical && for conditional rendering

TSX
const Panel = () => <div>{isOpen && <Modal />}</div>;
TSX
const Panel = () => <div>{isOpen ? <Open /> : <Closed />}</div>; // real alternate
const Host = () => <Slot render={flag ? <A /> : null} />;        // used as a prop

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/no-or-none-component': 'error'
	}
}

#When Not To Use It

If you rely on react/jsx-no-leaked-render and prefer the explicit ternary form to avoid rendering falsy values like 0, keep using ternaries and leave this rule off.

#Resources