no-complicated-conditional-rendering (Deprecated)
Rule category
Complexity.
What it does
Prevents complicated conditional rendering in JSX.
Examples
Failing
import React from "react";
interface ExampleProps {
ExampleProps.hideShapes: booleanhideShapes: boolean;
ExampleProps.debugSvg: booleandebugSvg: boolean;
}
function function Example({ hideShapes, debugSvg }: ExampleProps): React.JSX.ElementExample({ hideShapes: booleanhideShapes, debugSvg: booleandebugSvg }: ExampleProps) {
return (
<JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
{hideShapes: booleanhideShapes
? null
: debugSvg: booleandebugSvg
? "<ShapesWithSVGs />"
: "<ShapesToDisplay />"}
</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
);
}Passing
import React from "react";
interface ExampleProps {
ExampleProps.hideShapes: booleanhideShapes: boolean;
ExampleProps.debugSvg: booleandebugSvg: boolean;
}
function function Example({ hideShapes, debugSvg }: ExampleProps): "<ShapesWithSVGs />" | "<ShapesToDisplay />" | nullExample({ hideShapes: booleanhideShapes, debugSvg: booleandebugSvg }: ExampleProps) {
if (hideShapes: booleanhideShapes) {Early return if nothing to render return null;
}
return debugSvg: booleandebugSvg ? "<ShapesWithSVGs />" : "<ShapesToDisplay />";
}