Rules
no-implicit-key

no-implicit-key (Deprecated)

Rule category

Suspicious.

What it does

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

Why is this bad?

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 ExampleProps {
  ExampleProps.items: {
    id: string;
    name: string;
}[]items: { id: stringid: string; name: stringname: string }[];
}
 
function function Example({ items }: ExampleProps): React.JSX.ElementExample({ items: {
    id: string;
    name: string;
}[]items }: ExampleProps) {
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      {items: {
    id: string;
    name: string;
}[]items.Array<{ id: string; name: string; }>.map<React.JSX.Element>(callbackfn: (value: {
    id: string;
    name: string;
}, index: number, array: {
    id: string;
    name: string;
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((item: {
    id: string;
    name: string;
}item) => (
        <JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li {...{ React.Attributes.key?: React.Key | null | undefinedkey: item: {
    id: string;
    name: string;
}item.id: stringid }}>{item: {
    id: string;
    name: string;
}item.name: stringname}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        //  - Prefer specifying key explicitly instead of spreading it from object.
      ))}
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

Passing

import React from "react";
 
interface ExampleProps {
  ExampleProps.items: {
    id: string;
    name: string;
}[]items: { id: stringid: string; name: stringname: string }[];
}
 
function function Example({ items }: ExampleProps): React.JSX.ElementExample({ items: {
    id: string;
    name: string;
}[]items }: ExampleProps) {
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      {items: {
    id: string;
    name: string;
}[]items.Array<{ id: string; name: string; }>.map<React.JSX.Element>(callbackfn: (value: {
    id: string;
    name: string;
}, index: number, array: {
    id: string;
    name: string;
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((item: {
    id: string;
    name: string;
}item) => (
        <JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: {
    id: string;
    name: string;
}item.id: stringid}>{item: {
    id: string;
    name: string;
}item.name: stringname}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}
no-duplicate-keyno-leaked-conditional-rendering