Missing "key" prop for element in iterator and Prop spreading is forbidden

Question

I got those 2 errors in my code, how can I fix those without using "suppress eslint-disable-next-line react/jsx-props-no-spreading/ or eslint-disable-next-line react/jsx-key" for this line?

 <UitkTableHead>
              {headerGroups.map((headerGroup) => (
                <UitkTableRow {...headerGroup.getHeaderGroupProps()}> //  Prop spreading is forbidden 
                  {headerGroup.headers.map((column) => (
                    <UitkTableCell scope="col" {...column.getHeaderProps()}> //Missing "key" prop for element in iterator 
                      {column.render('Header')}
                    </UitkTableCell>
                  ))}
                </UitkTableRow>
              ))}

I expect to make the code stop showing those errors, how to change the code to make that happened instead of add the ignore comment.

Edit: Here is my rules

 "rules": {
        "@typescript-eslint/ban-ts-comment": [
          "error",
          {
            "ts-ignore": "allow-with-description"
          }
        ],
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "class-methods-use-this": "off",
        "no-shadow": "off",
        "import/no-extraneous-dependencies": "off",
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error", {"variables": false}],
        "import/extensions": "off",
        "react/prop-types": "off",
        "react/require-default-props": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "global-require": "off",
        "import/no-dynamic-require": "off",
        "camelcase": "off",
        "react/jsx-props-no-spreading": "off",
        "no-empty-function": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@angular-eslint/no-empty-lifecycle-method": "off"
      }

score 1 · Accepted Answer · answered Apr 04 '22 at 18:05

Missing "key" prop for element in iterator

This error comes from using the .map() method on an array in React. When you use .map(), React wants a way to easily differentiate each item it is mapping when it compares the DOMs. To fix this, all you need to do is add a key with a unique identifier to each item, and if you don't have a unique identifier, you can add a parameter to .map() to grab the index of the item it is currently using:

{headerGroup.headers.map((column, index) => (
    <UitkTableCell key={index} scope="col" {...column.getHeaderProps()}>
        {column.render('Header')}
    </UitkTableCell>
))}

Important note, this way of using the index should ONLY be used if you cannot supply a unique key yourself, either through a library that generates one or by giving each object a key property themselves.

Prop spreading is forbidden

The easiest way to fix that would be to tell ESLint not to consider this file when parsing for that error, but there are different ways:

Disable the ESLint prop spreading error for the specific file by putting this comment at Line 1 in the component file: /* eslint-disable react/jsx-props-no-spreading *
Disabling the following line for the ESLint prop spreading error in the project's ESLint config: react/jsx-props-no-spreading
Do not use spreading. Destructure the spread argument before you render the element, pass that instead, and then return the mapped arguments that you want rendered:

{headerGroups.map((headerGroup) => (
    const hgProps = headerGroup.getHeaderGroupProps();
    return (
        <UitkTableRow {hgProps}>
            {headerGroup.headers.map((column, index) => (
                <UitkTableCell key={index} scope="col" {...column.getHeaderProps()}>
                    {column.render('Header')}
                </UitkTableCell>
            ))}
        </UitkTableRow>
    )
))}

If it happens below at the props for uitkTableCell as well, you can follow the same rule. Hope this helps!

Hi @erikohara99, I add this line in json file but still got the spreading error, any idea why it happened? "react/jsx-props-no-spreading": "off", — Nick, Apr 04 '22 at 18:25
As long as it's in package.json or an eslintrc file as follows: "eslintConfig": { "rules" : { "react/jsx-props-no-spreading": "off" } } it should work fine. Did you make sure to restart your dev server after you added it? — erikohara99, Apr 04 '22 at 18:35

score 0 · Answer 2 · answered Apr 04 '22 at 17:56

for Prop spreading is forbidden error refer:

How to resolve eslint error: "prop spreading is forbidden" in a custom route component?

for missing key error: you need to mention a unique value from map returned items in UitkTableCell as <UitkTableCell scope="col" key={column.unique_id}

Missing "key" prop for element in iterator and Prop spreading is forbidden

2 Answers2