[Bug]: react/jsx-key does not detect usage of `Array.push` etc.

[SimonSchick]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

Tl;dr the lint rule doesn't pick up items that are inserted into an array via push/unshift etc.

Expected Behavior

I've seen this pattern many times and I think we could reasonably assume that when the method name matches an array insertion method we can report an error.

This isn't foolproof without type information but I think this will be valuable.

Example:

const Comp = () => {
   const items = [];
   if (someCondition) {
      // this should cause an error/warning
      items.push(<span>test</span>);
   }
   if (someOtherCondition) {
      // same
      items.push(<span>test2</span>);
   }
   return <div>{items}</div>;
}

eslint-plugin-react version

7.37.5

eslint version

9.30.1

node version

24

[ljharb]

This is somewhat of an expected oversight in the rule, but also, mutation in React is pretty strongly discouraged - I'd suggest doing it like this instead:

   return (
     <div>
       {!!someCondition && <span>test</span>}
       {‼ someOtherCondition && <span>test2</span>}
     </div>
   );

which has the benefit both of being more react-y, and also more statically analyzeable, thus working with this rule.

[SimonSchick]

Some of the cases I dealt with had a lot of logic/conditions to decide what to insert into the list, putting that into a massive conditional block/return statement would make the resulting code very difficult to read.

I understand we don't want to encourage that pattern, but I don't see much of an alternative for complex cases.

[ljharb]

I'd be happy to review a PR that correctly caught these kinds of cases, but the jsx-key rule is very difficult to do static analysis for.