no-implicit-key

This rule is currently in rc and only available in v3.0.0 rc releases.

This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.

Full Name in eslint-plugin-react-x

react-x/no-implicit-key

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-implicit-key

Features

💭 🧪

Presets

Rule Details

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.

The following cases are allowed and will not be reported:

The key property originates from React's own type definitions (ex: React.Attributes.key), such as when spreading React.ComponentProps<"div">, React.HTMLAttributes<T>, or similar React-provided types.
The key property's type is React.Key, even if the property is declared in a user-defined type.

Common Violations

Invalid

import React from "react";

declare let someValues: { foo: string; bar: string; key: string };

function MyComponent() {
  return <div {...someValues} />;
  //          ^^^ 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}'.
}

Valid

import React from "react";

declare let someValues: { id: string; className: string; key: string };

function MyComponent() {
  const { key, ...rest } = someValues;
  //      ^^^ Dropping the 'key' prop from the spread attributes to prevent implicitly passing it to the component.
  return <div key={key} {...rest} />;
}

import React from "react";

declare let someValues: { id: string; className: string; key: React.Key };

function MyComponent() {
  return <div {...someValues} data-slot="pagination-item" />;
  //          ^^^ The 'key' property is typed as React.Key, which is a React-defined type alias. Allowed.
}

import React from "react";

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
  //                                     ^^^ The 'key' property originates from React.Attributes.key. Allowed.
}

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page