[Fix] jsx-no-leaked-render: coerce strategy now allows a ternary

Author: sjarva

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

docs/rules/jsx-no-leaked-render.md

@@ -141,6 +141,12 @@ const Component = ({ elements }) => {
 }
 ```
 
+```jsx
+const Component = ({ elements }) => {
+  return <div>{elements.length ? <List elements={elements}/> : <EmptyList />}</div>
+}
+```
+
 ## Rule Options
 
 The supported options are:
@@ -183,6 +189,12 @@ const Component = ({ count, title }) => {
 }
 ```
 
+```jsx
+const Component = ({ count, title, empty }) => {
+  return <div>{count ? title : empty}</div>
+}
+```
+
 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 <div>{count ? title : empty}</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.

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;
         }
 

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 <div>{count ? <List elements={elements}/> : <EmptyList />}</div>
+        }
+      `,
+      options: [{ validStrategies: ['coerce', 'ternary'] }],
+    },
+    {
+      code: `
+        const Component = ({ elements, count }) => {
+          return <div>{count ? <List elements={elements}/> : <EmptyList />}</div>
+        }
+      `,
+      options: [{ validStrategies: ['coerce'] }],
+    },
   ]),
 
   invalid: parsers.all([