Ensuring variables used in JSX conditionals are cast to booleans whenever using &&
to avoid unwanted side effects, e.g. for other falsey values like empty strings etc.
// BAD
const Component = ({ check }) => (
<div>
{check && <p>Check passes!</p>}
</div>
);
// GOOD
const Component = ({ check }) => (
<div>
{!!check && <p>Check passes!</p>}
{Boolean(check) && <p>Check passes!</p>}
{check ? <p>Check passes!</p> : null}
</div>
);
yarn add eslint-plugin-jsx-conditionals --dev
In your .eslintrc
config:
{
"plugins": [ "jsx-conditionals" ],
"rules": {
"jsx-conditionals/ensure-booleans": "error"
}
}
git clone git@github.com:julianburr/eslint-plugin-jsx-conditionals.git
cd eslint-plugin-jsx-conditionals
yarn
# Run tests
yarn test