no-missing-key

Rule category

Correctness.

What it does

Prevents missing key prop on items in list rendering.

Why is this bad?

React needs keys to identify items in the list. If you don’t specify a key, React will use the array index as a key, which often leads to subtle and confusing bugs.

Examples

Failing

import React from "react";
 
interface ExampleProps {
  ExampleProps.items: {
    id: number;
    name: string;
}[]
items: { id: numberid: number; name: stringname: string }[];
}
 
function function Example({ items }: ExampleProps): React.JSX.ElementExample({ items: {
    id: number;
    name: string;
}[]
items }: ExampleProps) {
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      {items: {
    id: number;
    name: string;
}[]
items.Array<{ id: number; name: string; }>.map<React.JSX.Element>(callbackfn: (value: {
    id: number;
    name: string;
}, index: number, array: {
    id: number;
    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((todo: {
    id: number;
    name: string;
}
todo) => (
        <const Todo: React.ComponentType<{
    id: number;
    name: string;
}>
Todo {...todo: {
    id: number;
    name: string;
}
todo} />
      // - Missing key, Each child in a list should have a unique 'key' prop.
      ))}
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}
 
declare const const Todo: React.ComponentType<{
    id: number;
    name: string;
}>
Todo: React.type React.ComponentType<P = {}> = React.ComponentClass<P, any> | React.FunctionComponent<P>Represents any user-defined component, either as a function or a class.

Similar to 
{@link 
JSXElementConstructor
}
, but with extra properties like

{@link 
FunctionComponent.defaultProps
defaultProps 
}
 and

{@link 
ComponentClass.contextTypes
contextTypes
}
.
@templateP The props the component accepts.@see{@link ComponentClass}@see{@link FunctionComponent}ComponentType<{ id: numberid: number; name: stringname: string }>;

Passing

import React from "react";
 
interface ExampleProps {
  ExampleProps.items: {
    id: number;
    name: string;
}[]
items: { id: numberid: number; name: stringname: string }[];
}
 
function function Example({ items }: ExampleProps): React.JSX.ElementExample({ items: {
    id: number;
    name: string;
}[]
items }: ExampleProps) {
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      {items: {
    id: number;
    name: string;
}[]
items.Array<{ id: number; name: string; }>.map<React.JSX.Element>(callbackfn: (value: {
    id: number;
    name: string;
}, index: number, array: {
    id: number;
    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((todo: {
    id: number;
    name: string;
}
todo) => (
        <const Todo: React.ComponentType<{
    id: number;
    name: string;
}>
Todo React.Attributes.key?: React.Key | null | undefinedkey={todo: {
    id: number;
    name: string;
}
todo.id: numberid} {...todo: {
    id: number;
    name: string;
}
todo} />
      ))}
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}
 
declare const const Todo: React.ComponentType<{
    id: number;
    name: string;
}>
Todo: React.type React.ComponentType<P = {}> = React.ComponentClass<P, any> | React.FunctionComponent<P>Represents any user-defined component, either as a function or a class.

Similar to 
{@link 
JSXElementConstructor
}
, but with extra properties like

{@link 
FunctionComponent.defaultProps
defaultProps 
}
 and

{@link 
ComponentClass.contextTypes
contextTypes
}
.
@templateP The props the component accepts.@see{@link ComponentClass}@see{@link FunctionComponent}ComponentType<{ id: numberid: number; name: stringname: string }>;