Avoid accidentally rendering falsy values in your JSX.
npm install eslint-plugin-jsx-falsyAvoid accidentally rendering falsy values in your JSX. Only works with @typescript-eslint/parser, and uses type information.
Exposes a single eslint rule, no-falsy-and, that errors if the left side of an inline && expression in JSX is a string or number. These expressions can cause unwanted values to render, and can even cause some crashes in React Native, when the string or number is falsy ("" or 0).
``tsx`
function MyComponent(props: {
str: string;
num: number;
maybeString: string | null;
maybeObj: {} | null;
}) {
return (
{props.str &&
{!!props.str &&
{props.maybeString &&
{props.maybeObj &&
{props.num &&
);
}
You'll first need to install ESLint and @typescript-eslint/parser:
`shell`
$ yarn add --dev eslint @typescript-eslint/parser
Next, install eslint-plugin-jsx-falsy:
`shell`
$ yarn add --dev eslint-plugin-jsx-falsy
Note: If you installed ESLint globally (using yarn global or npm install -g) then you must also install eslint-plugin-jsx-falsy globally.
Add jsx-falsy to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix. Note that the rule won't work unless project is specified in parserOptions, since this rule uses type information (more details here).
`json`
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["./tsconfig.json"]
},
"plugins": ["jsx-falsy"]
}
Then configure the rules you want to use under the rules section.
`json``
{
"rules": {
"jsx-falsy/no-falsy-and": "error"
}
}