strange fix for jsx-no-leaked-render #3297
Description
Input File
import { css } from "twin.macro"; export interface sortIndicatorProps { direction?: "up" | "down"; removeFromLayout?: boolean; className?: string; } export const sortIndicatorMarginLeft = "-1em"; export function SortIndicator({ direction, removeFromLayout = true, className, }: sortIndicatorProps) { return ( <span className={className} css={[ css` font-size: 0.8em; &:first-of-type { padding-right: 0.5ch; } `, removeFromLayout && css` position: absolute; margin-left: ${sortIndicatorMarginLeft}; `, ]}> {direction ? (direction === "down" ? "▼" : "▲") : ""} </span> ); }output file
import { css } from "twin.macro"; export interface sortIndicatorProps { direction?: "up" | "down"; removeFromLayout?: boolean; className?: string; } export const sortIndicatorMarginLeft = "-1em"; export function SortIndicator({ direction, removeFromLayout = true, className, }: sortIndicatorProps) { return ( <span className={className} css={[ css` font-size: 0.8em; &:first-of-type { padding-right: 0.5ch; } `, removeFromLayout && css` position: absolute; margin-left: ${sortIndicatorMarginLeft}; `, ]}> {/* lol what is this ↓↓↓↓↓ */} {!!!!!!!!!!!!!!!!!!!!direction && direction === "down" && "▼"} </span> ); }eslint rule setup
"react/jsx-no-leaked-render": [ // enforce that values are coerced to booleans in jsx conditionals "error", { validStrategies: ["coerce"], // coerce to boolean e.g. `<div>{count && title}</div>` becomes `<div>{!!count && title}</div>` }, ],