[Fix] jsx-no-leaked-render: prevent wrongly adding parens

jsx-eslint · Mar 4, 2024 · 730bac9 · 730bac9
1 parent b7780ce
commit 730bac9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Fixed
+* [`jsx-no-leaked-render`]: prevent wrongly adding parens ([#3700][] @developer-bandi)
+
+[#3700]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3700
+
 ## [7.34.0] - 2024.03.03
 
 ### Added

diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js
@@ -79,7 +79,7 @@ function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNod
       return fixer.replaceText(reportedNode, `${newText} && ${alternateVal}`);
     }
 
-    if (rightNode.type === 'ConditionalExpression') {
+    if (rightNode.type === 'ConditionalExpression' || rightNode.type === 'LogicalExpression') {
       return fixer.replaceText(reportedNode, `${newText} && (${rightSideText})`);
     }
     if (rightNode.type === 'JSXElement') {

diff --git a/tests/lib/rules/jsx-no-leaked-render.js b/tests/lib/rules/jsx-no-leaked-render.js
@@ -733,6 +733,24 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         }
       `,
     },
+    {
+      code: `
+        const Component = ({ connection, hasError, hasErrorUpdate}) => {
+          return <div>{connection && (hasError || hasErrorUpdate)}</div>
+        }
+      `,
+      options: [{ validStrategies: ['coerce'] }],
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 3,
+        column: 24,
+      }],
+      output: `
+        const Component = ({ connection, hasError, hasErrorUpdate}) => {
+          return <div>{!!connection && (hasError || hasErrorUpdate)}</div>
+        }
+      `,
+    },
 
     // cases: ternary isn't valid if strategy is only "coerce"
     {