[Fix] jsx-no-leaked-render: fix removing parentheses for conditionals

Fixes #3502.

Author: akulsr0

CHANGELOG.md

@@ -18,6 +18,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-newline`]: No newline between comments and jsx elements ([#3493][] @justmejulian)
 * [`jsx-no-leaked-render`]: Don't report errors on empty strings if React >= v18 ([#3488][] @himanshu007-creator)
 * [`no-invalid-html-attribute`]: convert autofix to suggestion ([#3474][] @himanshu007-creator @ljharb)
+ * [`jsx-no-leaked-render`]: fix removing parentheses for conditionals ([#3502][] @akulsr0)
 
 ### Changed
 * [Docs] [`jsx-no-leaked-render`]: Remove mentions of empty strings for React 18 ([#3468][] @karlhorky)

lib/rules/jsx-no-leaked-render.js

@@ -64,6 +64,9 @@ function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNod
       return `${getIsCoerceValidNestedLogicalExpression(node) ? '' : '!!'}${nodeText}`;
     }).join(' && ');
 
+    if (rightNode.type === 'ConditionalExpression') {
+      return fixer.replaceText(reportedNode, `${newText} && (${rightSideText})`);
+    }
     return fixer.replaceText(reportedNode, `${newText} && ${rightSideText}`);
   }
 

tests/lib/rules/jsx-no-leaked-render.js

@@ -829,5 +829,23 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         column: 24,
       }],
     },
+    {
+      code: `
+        const MyComponent = () => {
+          return <div>{maybeObject && (isFoo ? <Aaa /> : <Bbb />)}</div>
+        }
+      `,
+      output: `
+        const MyComponent = () => {
+          return <div>{!!maybeObject && (isFoo ? <Aaa /> : <Bbb />)}</div>
+        }
+      `,
+      options: [{ validStrategies: ['coerce'] }],
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 3,
+        column: 24,
+      }],
+    },
   ]),
 });