Skip to main content

react/useKey

This rule detects a missing key prop in a element that requires it. Keys help React identify which items have changed, are added, or are removed.

ESLint Equivalent: jsx-key

Examples

Invalid

const a = [<div />, <div />]

 file.tsx:1:11 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in array.

    const a = [<div />, <div />]
               ^^^^^^^

  Keys help React identify which items have changed, are added, or are
    removed.

 file.tsx:1:20 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in array.

    const a = [<div />, <div />]
                        ^^^^^^^

  Keys help React identify which items have changed, are added, or are
    removed.


const a = [1, 2].map(x => <div>{x}</div>);

 file.tsx:1:26 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    const a = [1, 2].map(x => <div>{x}</div>);
                              ^^^^^^^^^^^^^^

  Keys help React identify which items have changed, are added, or are
    removed.


const a = foo?.map(x => <div>{x}</div>);

 file.tsx:1:24 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    const a = foo?.map(x => <div>{x}</div>);
                            ^^^^^^^^^^^^^^

  Keys help React identify which items have changed, are added, or are
    removed.


React.Children.map(children, x => <div>{x}</div>);

 file.tsx:1:34 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    React.Children.map(children, x => <div>{x}</div>);
                                      ^^^^^^^^^^^^^^

  Keys help React identify which items have changed, are added, or are
    removed.


Children.map(children, x => <div>{x}</div>);

 file.tsx:1:28 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    Children.map(children, x => <div>{x}</div>);
                                ^^^^^^^^^^^^^^

  Keys help React identify which items have changed, are added, or are
    removed.


const a = [1, 2].map(x => {
	return <div>{x}</div>;
});

 file.tsx:2:8 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    1const a = [1, 2].map(x => {
  > 2  return <div>{x}</div>;
              ^^^^^^^^^^^^^^
    3});

  Keys help React identify which items have changed, are added, or are
    removed.


React.Children.map(children, x => {
	return <div>{x}</div>;
});

 file.tsx:2:8 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    1React.Children.map(children, x => {
  > 2  return <div>{x}</div>;
              ^^^^^^^^^^^^^^
    3});

  Keys help React identify which items have changed, are added, or are
    removed.


Children.map(children, x => {
	return <div>{x}</div>;
});

 file.tsx:2:8 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    1Children.map(children, x => {
  > 2  return <div>{x}</div>;
              ^^^^^^^^^^^^^^
    3});

  Keys help React identify which items have changed, are added, or are
    removed.


const a = [1, 2].map(function(x) {
	return <div>{x}</div>;
});

 file.tsx:2:8 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    1const a = [1, 2].map(function(x) {
  > 2  return <div>{x}</div>;
              ^^^^^^^^^^^^^^
    3});

  Keys help React identify which items have changed, are added, or are
    removed.


React.Children.map(children, function(x) {
	return <div>{x}</div>;
});

 file.tsx:2:8 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    1React.Children.map(children, function(x) {
  > 2  return <div>{x}</div>;
              ^^^^^^^^^^^^^^
    3});

  Keys help React identify which items have changed, are added, or are
    removed.


Children.map(children, function(x) {
	return <div>{x}</div>;
});

 file.tsx:2:8 lint/react/useKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a key prop with a unique value for each element in iterator.

    1Children.map(children, function(x) {
  > 2  return <div>{x}</div>;
              ^^^^^^^^^^^^^^
    3});

  Keys help React identify which items have changed, are added, or are
    removed.

Valid

const a = [<div key='a' />, <div key={'b'} />]
const a = [1, 2].map(x => <div key={x}>{x}</div>)
React.Children.map(children, x => <div key={x}>{x}</div>)
Children.map(children, x => <div key={x}>{x}</div>)
const a = [1, 2].map(x => {
	return <div key={x}>{x}</div>;
});
React.Children.map(children, x => {
	return <div key={x}>{x}</div>;
});
Children.map(children, x => {
	return <div key={x}>{x}</div>;
});
const a = [1, 2].map(function(x) {
	return <div key={x}>{x}</div>;
});
React.Children.map(children, function(x) {
	return <div key={x}>{x}</div>;
});
Children.map(children, function(x) {
	return <div key={x}>{x}</div>;
});