eslint-plugin-react: jsx-key `Missing "key" prop for element in array` when there is no array/iteration

Hello,

I just upgraded eslint-plugin-react from 7.28.0 to 7.29.0

The result is I now get a Missing "key" prop for element in array error on all my components, regardless of them having an array/map or anything that would require a key prop.

Before upgrade, the app worked fine, the key prop was already where it should be, on all arrays/lists.

Example of error:

  17:7  error  Missing "key" prop for element in array  react/jsx-key

Screenshot 2022-02-25 at 08 29 31

=> no array on line 17 char 7, just calling a component.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 129
  • Comments: 49 (10 by maintainers)

Commits related to this issue

Most upvoted comments

v7.29.1 is released.

I can confirm I’m seeing this with eslint-plugin-react@7.29.0 downgrading to 7.28.0 the error goes away.

I’ll get a fix out for this today; no further comments are needed 😃

I know it’s a bit late, as many of you found the solution probably but I want to add my experience,i was facing the same problem but then I used React fragment (<></>) and the error was removed.

We can use resolutions temporarily until it is fixed

In package.json file

  "resolutions": {
    "eslint-plugin-react": "7.28.0"
  },

It works like a charm! Thank you @shrijan00003 💯

We can use resolutions temporarily until it is fixed

In package.json file


  "resolutions": {
    "eslint-plugin-react": "7.28.0"
  },

Please stop commenting “quick fixes”. A proper fix will be out soon; downgrading to v7.28.0 or disabling the react/jsx-key rule is all you should be doing for now.

I confirm same issue, I’m using vite with React TypeScript

Just installed a new project using npx create-next-app and I’m getting the exact same error

Everyone getting this same error. It is temporarily resolved using this https://nextjs.org/docs/api-reference/next.config.js/ignoring-eslint

Just a quick heads up to anyone still experiencing this after upgrading. You may have to delete your .next folder after upgrading to 7.29.1

sorry all good, just had to close and reopen the folder.

quick fix on .eslintrc

{
  "extends": ["next", "next/core-web-vitals"],
  "react/jsx-key": "off"
}

@awmleer because github’s releases API is very inconvenient, and i often forget to make one. I’ll do so now.

I do use keys, but of course only for the outmost element. This new rule requires a key for every child element, too. I think this is an error. In the following example the rule throws an error that the div element doesn’t have a key attribute. That’s wrong.

{this.myArray.map((item) => (
  <li key={item.id}>
    <div>foo</div>
  </li>
)

Wondering why there is no release log about 7.29.0 on the releases page. 🤔

The problem was fixed with the last update in my case, @7.29.2

Vite with React TypeScript

@altuno screenshots don’t make it clear what code’s being warned by what rule, but if you could file a new issue with text snippets, that’d be great 😃

I also encountered the same problem, it can be solved by downgrading the version

Same here. image