#jsx-key

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-key': 'error',
    },
  },
]);

Disallow missing key props in iterators / collection literals.

#Rule Details

Warn if a JSX element that likely needs a key prop — namely, one inside an array literal or returned from an arrow function / function expression passed to Array.prototype.map or Array.from — is missing one.

Examples of incorrect code for this rule:

[<Hello />, <Hello />, <Hello />];

data.map(x => <Hello>{x}</Hello>);

Array.from([1, 2, 3], (x) => <Hello>{x}</Hello>);

<Hello {...{ key: id, id, caption }} />

In the last example the key is being spread, which is currently possible but discouraged in favor of a statically provided key.

Examples of correct code for this rule:

[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];

data.map((x) => <Hello key={x.id}>{x}</Hello>);

Array.from([1, 2, 3], (x) => <Hello key={x}>{x}</Hello>);

<Hello key={id} {...{ id, caption }} />

#Rule Options

{
  "react/jsx-key": [
    "error",
    {
      "checkFragmentShorthand": false,
      "checkKeyMustBeforeSpread": false,
      "warnOnDuplicates": false
    }
  ]
}

#checkFragmentShorthand (default: false)

When true, report the shorthand fragment syntax (<></>) used in arrays / iterators, since shorthand fragments cannot carry a key. The reported suggestion uses the configured pragma, e.g. React.Fragment or, with settings.react.pragma/settings.react.fragment, Act.Frag.

{ "react/jsx-key": ["error", { "checkFragmentShorthand": true }] }

[<></>, <></>, <></>];

data.map(x => <>{x}</>);

#checkKeyMustBeforeSpread (default: false)

When true, report any key prop that appears after a {...spread} attribute. Required by React's new JSX transform.

{ "react/jsx-key": ["error", { "checkKeyMustBeforeSpread": true }] }

<span {...spread} key="key-after-spread" />;

#warnOnDuplicates (default: false)

When true, report keys whose source-text value is identical within the same container (array literal or JSX parent).

{ "react/jsx-key": ["error", { "warnOnDuplicates": true }] }

const spans = [
  <span key="notunique" />,
  <span key="notunique" />,
];

Key values are compared as raw source text. key="a" and key={'a'} do NOT count as duplicates of each other — they are different source strings.

#When Not To Use It

If you are not using JSX then you can disable this rule.

Also, if you frequently use arrow functions that return JSX but never render the JSX inside an iterable, you may want to disable this rule.

#Original Documentation

• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md