From 04472dd12f81eaf50580887786a6ffbef79f32b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mario=20Beltr=C3=A1n=20Alarc=C3=B3n?= Date: Wed, 9 Mar 2022 01:09:01 +0100 Subject: [PATCH] update docs --- docs/rules/jsx-no-leaked-zero.md | 40 +++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/docs/rules/jsx-no-leaked-zero.md b/docs/rules/jsx-no-leaked-zero.md index 6805eb092b..053af5e03b 100644 --- a/docs/rules/jsx-no-leaked-zero.md +++ b/docs/rules/jsx-no-leaked-zero.md @@ -58,7 +58,7 @@ const Component = ({ numberA, numberB }) => { ```jsx // If the condition is a boolean value, this rule will report the logical expression -// since it can't guess the type of the condition. +// since it can't infer the type of the condition. const Component = ({ someBool }) => { return
{someBool && {numberA+numberB}}
} @@ -120,36 +120,60 @@ const Component = ({ elements }) => { The supported options are: -### `fixStrategy` -`"cast"` or `"ternary"` (default: `"ternary"`) - Decide the strategy to autofix the rule. The "cast" option will cast to boolean the condition of the JSX expression. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values. +### `validFixStrategies` +An array containing `"cast"`, `"ternary"` or both (default: `["ternary", "cast"]`) - Decide which strategies are valid to consider that a potential leaked zero is prevented (at least 1 is required). This also affects the autofix approach used by the rule. The "cast" option will cast to boolean the condition of the JSX expression. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values. If both options are set, the first one will be used for autofixing the reported occurrences. It can be set like: ```js // ... -"react/jsx-no-leaked-zero": [, { "fixStrategy": <"cast" | "ternary"> }] +"react/jsx-no-leaked-zero": [, { "validFixStrategies": ["ternary", "cast"] }] // ... ``` -Assuming the following incorrect code: +Assuming the following options: `{ "validFixStrategies": ["ternary"] }` + +Examples of **incorrect** code for this rule, with the above configuration: ```jsx const Component = ({ count, title }) => { return
{count && title}
} ``` -These are the fixes depending on the strategy selected: ```jsx -// fixStrategy: "cast" const Component = ({ count, title }) => { return
{!!count && title}
} +``` + +Examples of **correct** code for this rule, with the above configuration: +```jsx +const Component = ({ count, title }) => { + return
{count ? title : null}
+} +``` + +Assuming the following options: `{ "validFixStrategies": ["cast"] }` + +Examples of **incorrect** code for this rule, with the above configuration: +```jsx +const Component = ({ count, title }) => { + return
{count && title}
+} +``` -// fixStrategy: "ternary" +```jsx const Component = ({ count, title }) => { return
{count ? title : null}
} ``` +Examples of **correct** code for this rule, with the above configuration: +```jsx +const Component = ({ count, title }) => { + return
{!!count && title}
+} +``` + ## When Not To Use It If you are working in a typed-codebase which encourages you to always use boolean conditions, this rule can be disabled.