jsx-eslint/eslint-plugin-react

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

Open

#3937 opened on Jul 8, 2025

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

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

Contributor guide

Tech stack
javascripttypescriptreactnodejs
Domain
frontendtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ESLint plugin developmentAST traversalReact JSX syntax
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the existing `jsx key` rule in `lib/rules/jsx key.js` to understand how it currently detects missing keys in loops (e.g., `map`). Extend the logic to also flag when JSX elements are passed to array methods like `push`, `unshift`, `splice`, etc. Look at how the rule collects JSX elements and where it reports errors. Consider using AST node types like `CallExpression` with callee property `push`. Check any existing tests in `tests/lib/rules/jsx key.js` to add new test cases. Ensure the rule does not produce false positives for non array variables.