noArrayIndexKey

Diagnostic Category: lint/suspicious/noArrayIndexKey

JSX and TSX

Since: v1.0.0

Sources:

Same as: react/no-array-index-key

Discourage the usage of Array index in keys.

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Source React documentation

Examples

Invalid

something.forEach((Element, index) => {
    <Component key={index} >foo</Component>
});

code-block.jsx:2:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={index} >foo</Component>
      │                     ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={index} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

React.Children.map(this.props.children, (child, index) => (
    React.cloneElement(child, { key: index })
))

code-block.jsx:2:38 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ React.Children.map(this.props.children, (child, index) => (
  > 2 │     React.cloneElement(child, { key: index })
      │                                      ^^^^^
    3 │ ))
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ React.Children.map(this.props.children, (child, index) => (
      │                                                 ^^^^^
    2 │     React.cloneElement(child, { key: index })
    3 │ ))
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

something.forEach((Element, index) => {
    <Component key={`test-key-${index}`} >foo</Component>
});

code-block.jsx:2:33 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={test-key-$&#123;index&#125;} >foo</Component>
      │                                 ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={test-key-$&#123;index&#125;} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

something.forEach((Element, index) => {
    <Component key={"test" + index} >foo</Component>
});

code-block.jsx:2:30 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={“test” + index} >foo</Component>
      │                              ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={“test” + index} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

Valid

something.forEach((item) => {
    <Component key={item.id} >foo</Component>
});

something.forEach((item) => {
    <Component key={item.baz.foo} >foo</Component>
});

noArrayIndexKey

Examples

Invalid

Valid

Related links