[Fix] jsx-key: prevent false "missing array key" warning

Fixes #3215
jsx-eslint · Feb 25, 2022 · 13d8df6 · 13d8df6
1 parent ddcc5b3
commit 13d8df6
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git 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-key`]: prevent false "missing array key" warning ([#3215][] @ljharb)
+
+[#3215]: https://github.com/yannickcr/eslint-plugin-react/issues/3215
+
 ## [7.29.0] - 2022.02.24
 
 ### Added

diff --git a/lib/rules/jsx-key.js b/lib/rules/jsx-key.js
@@ -119,9 +119,11 @@ module.exports = {
           const keys = attrs.filter((x) => x.name && x.name.name === 'key');
 
           if (keys.length === 0) {
-            report(context, messages.missingArrayKey, 'missingArrayKey', {
-              node: element,
-            });
+            if (node.type === 'ArrayExpression') {
+              report(context, messages.missingArrayKey, 'missingArrayKey', {
+                node: element,
+              });
+            }
           } else {
             keys.forEach((attr) => {
               const value = context.getSourceCode().getText(attr.value);

diff --git a/tests/lib/rules/jsx-key.js b/tests/lib/rules/jsx-key.js
@@ -74,6 +74,47 @@ ruleTester.run('jsx-key', rule, {
         ];
       `,
     },
+    {
+      code: `
+        function Component(props) {
+          return hasPayment ? (
+            <div className="stuff">
+              <BookingDetailSomething {...props} />
+              {props.modal && props.calculatedPrice && (
+                <SomeOtherThing items={props.something} discount={props.discount} />
+              )}
+            </div>
+          ) : null;
+        }
+      `,
+    },
+    {
+      code: `
+        import React, { FC, useRef, useState } from 'react';
+
+        import './ResourceVideo.sass';
+        import VimeoVideoPlayInModal from '../vimeoVideoPlayInModal/VimeoVideoPlayInModal';
+        
+        type Props = {
+          videoUrl: string;
+          videoTitle: string;
+        };
+        const ResourceVideo: FC<Props> = ({
+          videoUrl,
+          videoTitle,
+        }: Props): JSX.Element => {
+          return (
+            <div className="resource-video">
+              <VimeoVideoPlayInModal videoUrl={videoUrl} />
+              <h3>{videoTitle}</h3>
+            </div>
+          );
+        };
+        
+        export default ResourceVideo;
+      `,
+      features: ['types'],
+    },
   ]),
   invalid: parsers.all([
     {