diff --git a/CHANGELOG.md b/CHANGELOG.md index 715d1db33b..5e047a2d48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange ### Fixed * [`jsx-key`]: fix detecting missing key in `Array.from`'s mapping function ([#3369][] @sjarva) +* [`jsx-no-leaked-render`]: coerce strategy now allows a ternary ([#3370][], @sjarva) +[#3370]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3370 [#3369]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3369 ## [7.31.0] - 2022.08.24 diff --git a/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md index 86cd54faa9..639aaaadb4 100644 --- a/docs/rules/jsx-no-leaked-render.md +++ b/docs/rules/jsx-no-leaked-render.md @@ -141,6 +141,12 @@ const Component = ({ elements }) => { } ``` +```jsx +const Component = ({ elements }) => { + return
{elements.length ? : }
+} +``` + ## Rule Options The supported options are: @@ -183,6 +189,12 @@ const Component = ({ count, title }) => { } ``` +```jsx +const Component = ({ count, title, empty }) => { + return
{count ? title : empty}
+} +``` + Assuming the following options: `{ "validStrategies": ["coerce"] }` Examples of **incorrect** code for this rule, with the above configuration: @@ -207,6 +219,12 @@ const Component = ({ count, title }) => { } ``` +```jsx +const Component = ({ count, title, empty }) => { + return
{count ? title : empty}
+} +``` + ## 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. diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js index ce4bf91c10..efea6a63c4 100644 --- a/lib/rules/jsx-no-leaked-render.js +++ b/lib/rules/jsx-no-leaked-render.js @@ -144,7 +144,8 @@ module.exports = { } const isValidTernaryAlternate = TERNARY_INVALID_ALTERNATE_VALUES.indexOf(node.alternate.value) === -1; - if (isValidTernaryAlternate) { + const isJSXElementAlternate = node.alternate.type === 'JSXElement'; + if (isValidTernaryAlternate || isJSXElementAlternate) { return; } diff --git a/tests/lib/rules/jsx-no-leaked-render.js b/tests/lib/rules/jsx-no-leaked-render.js index bf13768861..032d8eadfb 100644 --- a/tests/lib/rules/jsx-no-leaked-render.js +++ b/tests/lib/rules/jsx-no-leaked-render.js @@ -175,6 +175,24 @@ ruleTester.run('jsx-no-leaked-render', rule, { `, options: [{ validStrategies: ['coerce'] }], }, + // Fixes for: + // - https://github.com/jsx-eslint/eslint-plugin-react/issues/3354 + { + code: ` + const Component = ({ elements, count }) => { + return
{count ? : }
+ } + `, + options: [{ validStrategies: ['coerce', 'ternary'] }], + }, + { + code: ` + const Component = ({ elements, count }) => { + return
{count ? : }
+ } + `, + options: [{ validStrategies: ['coerce'] }], + }, ]), invalid: parsers.all([