Closed
Description
Context
There is a sample Checkbox
component:
const Checkbox = ({
isChecked = false,
isIndeterminate = false,
}: {
isChecked?: boolean;
isIndeterminate?: boolean;
}) => (
<input
checked={isIndeterminate ? false : isChecked}
type="checkbox"
/>
);
The eslint config file contains a rule:
"react/jsx-no-leaked-render": ["error", { validStrategies: ["coerce"] }],
Expected behavior
Linting the code raises no issues
Actual behavior
- Eslint displays an error for the line:
checked={isIndeterminate ? false : isChecked}
Potential leaked value that might cause unintentionally rendered values or rendering crasheseslint[react/jsx-no-leaked-render](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-leaked-render.md)
- When auto-fix is performed, the code above is replaced with
checked={!!isIndeterminate && false}
which causes the logical issues (the isChecked
is removed in that case).