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: number
id: number; name: string
name: string }[];
}
function function Example({ items }: ExampleProps): React.JSX.Element
Example({ 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.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
}
.ComponentType<{ id: number
id: number; name: string
name: string }>;
Passing
import React from "react";
interface ExampleProps {
ExampleProps.items: {
id: number;
name: string;
}[]
items: { id: number
id: number; name: string
name: string }[];
}
function function Example({ items }: ExampleProps): React.JSX.Element
Example({ 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.map((todo: {
id: number;
name: string;
}
todo) => (
<const Todo: React.ComponentType<{
id: number;
name: string;
}>
Todo React.Attributes.key?: React.Key | null | undefined
key={todo: {
id: number;
name: string;
}
todo.id: number
id} {...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
}
.ComponentType<{ id: number
id: number; name: string
name: string }>;