[Fix] jsx-key: detect missing keys in logical expressions

Author: yalperg

CHANGELOG.md

@@ -21,10 +21,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add `onScrollEnd` and `onScrollEndCapture` events as known properties ([#3958][] @xfeeefeee)
 * Remove extra space from CLI warning ([#3942][] @junaidkbr)
 * [`jsx-key`]: detect missing keys in return statement with ternary operator ([#3928][] @hyeonbinHur)
+* [`jsx-key`]: detect missing keys in logical expressions ([#3986][] @yalperg)
 
 ### Changed
 * [Docs] [`no-array-index-key`]: add template literal examples ([#3978][] @akahoshi1421)
 
+[#3986]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3986
 [#3978]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3978
 [#3958]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3958
 [#3980]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3980

lib/rules/jsx-key.js

@@ -156,6 +156,8 @@ module.exports = {
                 if (isJSX(argument.alternate)) {
                   checkIteratorElement(argument.alternate);
                 }
+              } else if (argument.type === 'LogicalExpression' && isJSX(argument.right)) {
+                checkIteratorElement(argument.right);
               } else {
                 checkIteratorElement(argument);
               }

tests/lib/rules/jsx-key.js

@@ -211,6 +211,9 @@ ruleTester.run('jsx-key', rule, {
       `,
       settings,
     },
+    { code: '[1, 2, 3].map(x => { return x && <App key={x} />; });' },
+    { code: '[1, 2, 3].map(x => { return x && y && <App key={x} />; });' },
+    { code: '[1, 2, 3].map(x => { return x && foo(); });' },
   ]),
   invalid: parsers.all([
     {
@@ -481,5 +484,13 @@ ruleTester.run('jsx-key', rule, {
       options: [{ checkKeyMustBeforeSpread: true }],
       errors: [{ messageId: 'keyBeforeSpread' }],
     },
+    {
+      code: '[1, 2, 3].map(x => { return x && <App />; });',
+      errors: [{ messageId: 'missingIterKey' }],
+    },
+    {
+      code: '[1, 2, 3].map(x => { return x || y || <App />; });',
+      errors: [{ messageId: 'missingIterKey' }],
+    },
   ]),
 });