[Fix] jsx-key: incorrect behavior for checkKeyMustBeforeSpread with map callbacks

CHANGELOG.md

@@ -10,7 +10,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`boolean-prop-naming`]: avoid a crash with a spread prop ([#3733][] @ljharb)
 * [`jsx-boolean-value`]: `assumeUndefinedIsFalse` with `never` must not allow explicit `true` value ([#3757][] @6uliver)
 * [`no-object-type-as-default-prop`]: enable rule for components with many parameters ([#3768][] @JulienR1)
+* [`jsx-key`]: incorrect behavior for checkKeyMustBeforeSpread with map callbacks ([#3769][] @akulsr0)
 
+[#3769]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3769
 [#3768]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3768
 [#3762]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3762
 [#3757]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3757

lib/rules/jsx-key.js

@@ -73,11 +73,31 @@
  const reactPragma = pragmaUtil.getFromContext(context);
  const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
 
+ function isKeyAfterSpread(attributes) {
+ let hasFoundSpread = false;
+ return attributes.some((attribute) => {
+ if (attribute.type === 'JSXSpreadAttribute') {
+ hasFoundSpread = true;
+ return false;
+ }
+ if (attribute.type !== 'JSXAttribute') {
+ return false;
+ }
+ return hasFoundSpread && propName(attribute) === 'key';
+ });
+ }
+
  function checkIteratorElement(node) {
- if (node.type === 'JSXElement' && !hasProp(node.openingElement.attributes, 'key')) {
- report(context, messages.missingIterKey, 'missingIterKey', {
- node,
- });
+ if (node.type === 'JSXElement') {
+ if (!hasProp(node.openingElement.attributes, 'key')) {
+ report(context, messages.missingIterKey, 'missingIterKey', { node });
+ } else {
+ const attrs = node.openingElement.attributes;
+
+ if (checkKeyMustBeforeSpread && isKeyAfterSpread(attrs)) {
+ report(context, messages.keyBeforeSpread, 'keyBeforeSpread', { node });
+ }
+ }
  } else if (checkFragmentShorthand && node.type === 'JSXFragment') {
  report(context, messages.missingIterKeyUsePrag, 'missingIterKeyUsePrag', {
  node,
@@ -115,20 +135,6 @@
  return returnStatements;
  }
 
- function isKeyAfterSpread(attributes) {
- let hasFoundSpread = false;
- return attributes.some((attribute) => {
- if (attribute.type === 'JSXSpreadAttribute') {
- hasFoundSpread = true;
- return false;
- }
- if (attribute.type !== 'JSXAttribute') {
- return false;
- }
- return hasFoundSpread && propName(attribute) === 'key';
- });
- }
-
  /**
  * Checks if the given node is a function expression or arrow function,
  * and checks if there is a missing key prop in return statement's arguments

tests/lib/rules/jsx-key.js

@@ -409,5 +409,20 @@ ruleTester.run('jsx-key', rule, {
  { messageId: 'missingIterKey' },
  ],
  },
+ {
+ code: `
+ const TestCase = () => {
+ const list = [1, 2, 3, 4, 5];
+
+ return (
+ <div>
+ {list.map(x => <div {...spread} key={x} />)}
+ </div>
+ );
+ };
+ `,
+ options: [{ checkKeyMustBeforeSpread: true }],
+ errors: [{ messageId: 'keyBeforeSpread' }],
+ },
  ]),
 });