Which eslint plugin catches key errors in nextjs?

Question

I am using eslint in nextjs and When running a loop using MAP, no errors are thrown even though I didn't put a value for KEY. What settings do I need to install to be notified of errors?

Below is my eslint configuration.

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "plugins": ["simple-import-sort"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "import/prefer-default-export": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "some": ["nesting", "id"]
      }
    ]
  }
}

Also, can't I just give an index to a key value in a regular array (where the order doesn't change)? What should I do when there are no other values available ?

Answer 1

React's key requirement rule is react/jsx-key which is a part of eslint-plugin-react. You can check it out in this document.

To install it, you can follow these steps:

1. Install the package

npm install --save-dev eslint-plugin-react
Or
yarn add --dev eslint-plugin-react

2. Put "plugin:react/recommended" under eslintrc config file

{
  "extends": [
    "plugin:react/recommended",
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "plugins": ["simple-import-sort"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "import/prefer-default-export": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "some": ["nesting", "id"]
      }
    ]
  }
}

Note that the order of extends items matters, so you can arrange that list based on your own preferred rules.