logoESLint React
Rules

no-implicit-key

This rule is experimental and may change in the future or be removed. It is not recommended to use it 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

  • x
  • recommended
  • recommended-typescript
  • recommended-type-checked

Description

Prevents key from not being explicitly specified (e.g. spreading key from objects).

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

And it's also be proposed to be deprecated is this RFC: Deprecate spreading key from objects.

Examples

Failing

import React from "react";

interface MyComponentProps {
  items: { id: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map(({ id, name, ...rest }) => {
        const props = { key: id, ...rest };
        return <li {...props}>{name}</li>;
        //         ^^^^^^^^^^
        //         - Do not use implicit 'key' props.
      })}
    </ul>
  );
}

Passing

import React from "react";

interface MyComponentProps {
  items: { id: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map(({ id, name, ...rest }) => {
        return <li key={id} {...rest}>{name}</li>;
      })}
    </ul>
  );
}

Implementation


See Also