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} />;
}

import React from "react";

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
  //                                     ^^^^^^^^^^
  //                                     - Passing-through React internally defined keys are allowed.
}

Description

Examples

Failing

Passing

Implementation

See Also

On this page