diff --git a/CHANGELOG.md b/CHANGELOG.md index 3bf878aaa4..0d242f583b 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js index 618b721baa..dccba5b695 100644 --- a/lib/rules/jsx-no-leaked-render.js +++ b/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}`); } diff --git a/tests/lib/rules/jsx-no-leaked-render.js b/tests/lib/rules/jsx-no-leaked-render.js index c760c8c118..cd9a1f982c 100644 --- a/tests/lib/rules/jsx-no-leaked-render.js +++ b/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
{maybeObject && (isFoo ? : )}
+ } + `, + output: ` + const MyComponent = () => { + return
{!!maybeObject && (isFoo ? : )}
+ } + `, + options: [{ validStrategies: ['coerce'] }], + errors: [{ + message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes', + line: 3, + column: 24, + }], + }, ]), });