no-implicit-key

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

core
recommended
recommended-typescript
recommended-type-checked

What it does

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

This rule aims to prevent spreading key from objects.

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

What it does

Examples

Failing

Passing

Implementation

See Also

On this page