Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Belco90 committed Mar 9, 2022
1 parent 59aee22 commit 04472dd
Showing 1 changed file with 32 additions and 8 deletions.
40 changes: 32 additions & 8 deletions docs/rules/jsx-no-leaked-zero.md
Expand Up @@ -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 <div>{someBool && <Results>{numberA+numberB}</Results>}</div>
}
Expand Down Expand Up @@ -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": [<enabled>, { "fixStrategy": <"cast" | "ternary"> }]
"react/jsx-no-leaked-zero": [<enabled>, { "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 <div>{count && title}</div>
}
```

These are the fixes depending on the strategy selected:
```jsx
// fixStrategy: "cast"
const Component = ({ count, title }) => {
return <div>{!!count && title}</div>
}
```

Examples of **correct** code for this rule, with the above configuration:
```jsx
const Component = ({ count, title }) => {
return <div>{count ? title : null}</div>
}
```

Assuming the following options: `{ "validFixStrategies": ["cast"] }`

Examples of **incorrect** code for this rule, with the above configuration:
```jsx
const Component = ({ count, title }) => {
return <div>{count && title}</div>
}
```

// fixStrategy: "ternary"
```jsx
const Component = ({ count, title }) => {
return <div>{count ? title : null}</div>
}
```

Examples of **correct** code for this rule, with the above configuration:
```jsx
const Component = ({ count, title }) => {
return <div>{!!count && title}</div>
}
```

## 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.
Expand Down

0 comments on commit 04472dd

Please sign in to comment.