no-implicit-key.mdx

title	no-implicit-key

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-implicit-key

Full Name in eslint-plugin-react-x

react-x/no-implicit-key

Features

💭 🧪

Presets

recommended-type-checked strict-type-checked

Description

Prevents implicitly passing the 'key' prop to components.

This makes it hard to see whether the key was passed correctly to the element or where it came from.

It is also proposed to be deprecated in this RFC: Deprecate spreading key from objects.

Examples

Failing

import React from "react";

interface Foo = { key?: string; }

interface MyComponentProps extends Foo {
  className: string;
  children: React.ReactNode;
}

function MyComponent(props: MyComponentProps) {
  return <div {...props} />;
  //          ^^^^^^^^^^
  //          - This spread attribute implicitly passes the 'key' prop to a component, this could lead to unexpected behavior. If you intend to pass the 'key' prop, use 'key={value}'.
}

Passing

import React from "react";

interface Foo = { key?: string; }

interface MyComponentProps extends Foo {
  className: string;
  children: React.ReactNode;
}

function MyComponent({ key, ...rest }) {
  return <div {...rest} />;
}

Implementation

• Rule Source
• Test Source

---

See Also

• jsx-key-before-spread
  Enforces that the key attribute is placed before the spread attribute in JSX elements.
• no-missing-key
  Prevents missing key on items in list rendering.
• no-duplicate-key
  Prevents duplicate key props on sibling elements when rendering lists.
• no-array-index-key
  Warns when an array index is used as a key prop.