From b3aac5f766706660868efe096f3b3fdee2ba595c Mon Sep 17 00:00:00 2001
From: Alexandr Metreniuc <metreniuk@gmail.com>
Date: Tue, 15 Nov 2022 14:24:59 +0200
Subject: [PATCH] [Fix] jsx-key: detect keys in logical expression and
 conditional expression

---
 docs/rules/jsx-key.md      |  8 ++++----
 lib/rules/jsx-key.js       | 13 +++++++++++--
 tests/lib/rules/jsx-key.js | 18 ++++++++++++++++--
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/docs/rules/jsx-key.md b/docs/rules/jsx-key.md
index 1076d4c145..0415b6df54 100644
--- a/docs/rules/jsx-key.md
+++ b/docs/rules/jsx-key.md
@@ -20,11 +20,11 @@ data.map(x => <Hello>{x}</Hello>);
 ```
 
 ```jsx
-<Hello {...{ key: id, id, caption }} />
+Array.from([1, 2, 3], (x) => <Hello>{x}</Hello>);
 ```
 
 ```jsx
-Array.from([1, 2, 3], (x) => <Hello>{x}</Hello>);
+<Hello {...{ key: id, id, caption }} />
 ```
 
 In the last example the key is being spread, which is currently possible, but discouraged in favor of the statically provided key.
@@ -40,11 +40,11 @@ data.map((x) => <Hello key={x.id}>{x}</Hello>);
 ```
 
 ```jsx
-<Hello key={id} {...{ id, caption }} />
+Array.from([1, 2, 3], (x) => <Hello key={x.id}>{x}</Hello>);
 ```
 
 ```jsx
-Array.from([1, 2, 3], (x) => <Hello key={x.id}>{x}</Hello>);
+<Hello key={id} {...{ id, caption }} />
 ```
 
 ## Rule Options
diff --git a/lib/rules/jsx-key.js b/lib/rules/jsx-key.js
index b1e0a62a4f..a5848e1a7d 100644
--- a/lib/rules/jsx-key.js
+++ b/lib/rules/jsx-key.js
@@ -149,10 +149,19 @@ module.exports = {
      */
     function checkArrowFunctionWithJSX(node) {
       const isArrFn = node && node.type === 'ArrowFunctionExpression';
-
-      if (isArrFn && (node.body.type === 'JSXElement' || node.body.type === 'JSXFragment')) {
+      const shouldCheckNode = (n) => n && (n.type === 'JSXElement' || n.type === 'JSXFragment');
+      if (isArrFn && shouldCheckNode(node.body)) {
         checkIteratorElement(node.body);
       }
+      if (node.body.type === 'LogicalExpression' && shouldCheckNode(node.body.right)) {
+        checkIteratorElement(node.body.right);
+      }
+      if (node.body.type === 'ConditionalExpression' && shouldCheckNode(node.body.consequent)) {
+        checkIteratorElement(node.body.consequent);
+      }
+      if (node.body.type === 'ConditionalExpression' && shouldCheckNode(node.body.alternate)) {
+        checkIteratorElement(node.body.alternate);
+      }
     }
 
     const childrenToArraySelector = `:matches(
diff --git a/tests/lib/rules/jsx-key.js b/tests/lib/rules/jsx-key.js
index 15b89c19b7..393affcaac 100644
--- a/tests/lib/rules/jsx-key.js
+++ b/tests/lib/rules/jsx-key.js
@@ -42,6 +42,8 @@ ruleTester.run('jsx-key', rule, {
     { code: '[<App key={0} />, <App key={1} />];' },
     { code: '[1, 2, 3].map(function(x) { return <App key={x} /> });' },
     { code: '[1, 2, 3].map(x => <App key={x} />);' },
+    { code: '[1, 2 ,3].map(x => x && <App x={x} key={x} />);' },
+    { code: '[1, 2 ,3].map(x => x ? <App x={x} key="1" /> : <OtherApp x={x} key="2" />);' },
     { code: '[1, 2, 3].map(x => { return <App key={x} /> });' },
     { code: 'Array.from([1, 2, 3], function(x) { return <App key={x} /> });' },
     { code: 'Array.from([1, 2, 3], (x => <App key={x} />));' },
@@ -188,10 +190,10 @@ ruleTester.run('jsx-key', rule, {
       code: `
         import Act from 'react';
         import { Children as ReactChildren } from 'react';
-        
+
         const { Children } = Act;
         const { toArray } = Children;
-        
+
         Act.Children.toArray([1, 2 ,3].map(x => <App />));
         Act.Children.toArray(Array.from([1, 2 ,3], x => <App />));
         Children.toArray([1, 2 ,3].map(x => <App />));
@@ -225,6 +227,18 @@ ruleTester.run('jsx-key', rule, {
       code: '[1, 2 ,3].map(x => <App />);',
       errors: [{ messageId: 'missingIterKey' }],
     },
+    {
+      code: '[1, 2 ,3].map(x => x && <App x={x} />);',
+      errors: [{ messageId: 'missingIterKey' }],
+    },
+    {
+      code: '[1, 2 ,3].map(x => x ? <App x={x} key="1" /> : <OtherApp x={x} />);',
+      errors: [{ messageId: 'missingIterKey' }],
+    },
+    {
+      code: '[1, 2 ,3].map(x => x ? <App x={x} /> : <OtherApp x={x} key="2" />);',
+      errors: [{ messageId: 'missingIterKey' }],
+    },
     {
       code: '[1, 2 ,3].map(x => { return <App /> });',
       errors: [{ messageId: 'missingIterKey' }],