From 730bac96b20d20116956c46414a65b5910687a85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=89=E1=85=A1=E1=86=BC?=
 =?UTF-8?q?=E1=84=83=E1=85=AE?= <puki4416@gmail.com>
Date: Tue, 5 Mar 2024 00:55:59 +0900
Subject: [PATCH] [Fix] `jsx-no-leaked-render`: prevent wrongly adding parens

---
 CHANGELOG.md                            |  5 +++++
 lib/rules/jsx-no-leaked-render.js       |  2 +-
 tests/lib/rules/jsx-no-leaked-render.js | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bc96b2e46..826696a029 100644
--- 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
index 05f319edbf..b77cd576cc 100644
--- 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
index 969c93635c..f5729bf059 100644
--- 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"
     {