[Fix] jsx-key: avoid a crash with optional chaining

Author: ljharb

CHANGELOG.md

@@ -5,13 +5,17 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Fixed
+* [`jsx-key`]: avoid a crash with optional chaining ([#3371][], @ljharb)
+
 ## [7.31.1] - 2022.08.26
 
 ### 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)
 
 [7.31.1]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.31.0...v7.31.1
+[#3371]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3371
 [#3370]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3370
 [#3369]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3369
 

lib/rules/jsx-key.js

@@ -226,8 +226,8 @@ module.exports = {
        CallExpression[callee.type="OptionalMemberExpression"][callee.property.name="map"],\
        OptionalCallExpression[callee.type="MemberExpression"][callee.property.name="map"],\
        OptionalCallExpression[callee.type="OptionalMemberExpression"][callee.property.name="map"]'(node) {
-        const fn = node.arguments[0];
-        if (!astUtil.isFunctionLikeExpression(fn)) {
+        const fn = node.arguments.length > 0 && node.arguments[0];
+        if (!fn || !astUtil.isFunctionLikeExpression(fn)) {
           return;
         }
 
@@ -239,7 +239,6 @@ module.exports = {
       // Array.from
       'CallExpression[callee.type="MemberExpression"][callee.property.name="from"]'(node) {
         const fn = node.arguments.length > 1 && node.arguments[1];
-
         if (!astUtil.isFunctionLikeExpression(fn)) {
           return;
         }

tests/helpers/parsers.js

@@ -15,6 +15,7 @@ function minEcmaVersion(features, parserOptions) {
   const minEcmaVersionForFeatures = {
     'class fields': 2022,
     'optional chaining': 2020,
+    'nullish coalescing': 2020,
   };
   const result = Math.max.apply(
     Math,
@@ -135,7 +136,10 @@ const parsers = {
         || (features.has('fragment') && semver.satisfies(version, '< 5'));
 
       const skipBabel = features.has('no-babel');
-      const skipOldBabel = skipBabel || features.has('no-babel-old') || semver.satisfies(version, '>= 8');
+      const skipOldBabel = skipBabel
+        || features.has('no-babel-old')
+        || features.has('optional chaining')
+        || semver.satisfies(version, '>= 8');
       const skipNewBabel = skipBabel
         || features.has('no-babel-new')
         || !semver.satisfies(version, '^7.5.0') // require('@babel/eslint-parser/package.json').peerDependencies.eslint

tests/lib/rules/jsx-key.js

@@ -99,7 +99,7 @@ ruleTester.run('jsx-key', rule, {
 
         import './ResourceVideo.sass';
         import VimeoVideoPlayInModal from '../vimeoVideoPlayInModal/VimeoVideoPlayInModal';
-        
+
         type Props = {
           videoUrl: string;
           videoTitle: string;
@@ -115,7 +115,7 @@ ruleTester.run('jsx-key', rule, {
             </div>
           );
         };
-        
+
         export default ResourceVideo;
       `,
       features: ['types'],
@@ -125,7 +125,7 @@ ruleTester.run('jsx-key', rule, {
         // testrule.jsx
         const trackLink = () => {};
         const getAnalyticsUiElement = () => {};
-        
+
         const onTextButtonClick = (e, item) => trackLink([, getAnalyticsUiElement(item), item.name], e);
       `,
     },
@@ -153,6 +153,16 @@ ruleTester.run('jsx-key', rule, {
       `,
       features: ['optional chaining'],
     },
+    {
+      code: `
+        const baz = foo?.bar?.()?.[1] ?? 'qux';
+
+        qux()?.map()
+
+        const directiveRanges = comments?.map(tryParseTSDirective)
+      `,
+      features: ['optional chaining', 'nullish coalescing'],
+    },
   ]),
   invalid: parsers.all([
     {