diff --git a/CHANGELOG.md b/CHANGELOG.md
index 715d1db33b..5e047a2d48 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md
index 86cd54faa9..639aaaadb4 100644
--- a/docs/rules/jsx-no-leaked-render.md
+++ b/docs/rules/jsx-no-leaked-render.md
@@ -141,6 +141,12 @@ const Component = ({ elements }) => {
}
```
+```jsx
+const Component = ({ elements }) => {
+ return
{elements.length ? : }
+}
+```
+
## Rule Options
The supported options are:
@@ -183,6 +189,12 @@ const Component = ({ count, title }) => {
}
```
+```jsx
+const Component = ({ count, title, empty }) => {
+ return {count ? title : empty}
+}
+```
+
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 {count ? title : empty}
+}
+```
+
## 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.
diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js
index ce4bf91c10..efea6a63c4 100644
--- a/lib/rules/jsx-no-leaked-render.js
+++ b/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;
}
diff --git a/tests/lib/rules/jsx-no-leaked-render.js b/tests/lib/rules/jsx-no-leaked-render.js
index bf13768861..032d8eadfb 100644
--- a/tests/lib/rules/jsx-no-leaked-render.js
+++ b/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 {count ? : }
+ }
+ `,
+ options: [{ validStrategies: ['coerce', 'ternary'] }],
+ },
+ {
+ code: `
+ const Component = ({ elements, count }) => {
+ return {count ? : }
+ }
+ `,
+ options: [{ validStrategies: ['coerce'] }],
+ },
]),
invalid: parsers.all([