Skip to main content

react/noArrayIndexKey

prevent usage of Array index in keys

ESLint Equivalent: no-array-index-key

Examples

Invalid

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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

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

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:7 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

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

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

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

  Avoid using array index as key property in an element.

    1React.Children.map(this.props.children, function (child, index) {
    
  > 2  return React.cloneElement(child, { key: index })
              ^^^^^^^^^^^^^^^^^^
    3})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:14 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.map(this.props.children, function (child, index) {
    
  > 2  return React.cloneElement(child, { key: index })
                    ^^^^^^^^^^^^
    3})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


React.Children.map(this.props.children, function (child, index) {
	const foo = React.cloneElement(child, { key: index })
	return foo;
})

 file.tsx:2:13 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.map(this.props.children, function (child, index) {
    
  > 2  const foo = React.cloneElement(child, { key: index })
                   ^^^^^^^^^^^^^^^^^^
    3  return foo;
    4})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:19 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.map(this.props.children, function (child, index) {
    
  > 2  const foo = React.cloneElement(child, { key: index })
                         ^^^^^^^^^^^^
    3  return foo;
    4})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1Children.map(this.props.children, (child, index) => (
  > 2  cloneElement(child, { key: index })
       ^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


Children.map(this.props.children, function (child, index) {
	return cloneElement(child, { key: index })
})

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

  Avoid using array index as key property in an element.

    1Children.map(this.props.children, function (child, index) {
  > 2  return cloneElement(child, { key: index })
              ^^^^^^^^^^^^
    3})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


Children.map(this.props.children, function (child, index) {
	const foo = cloneElement(child, { key: index })
	return foo;
})

 file.tsx:2:13 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1Children.map(this.props.children, function (child, index) {
  > 2  const foo = cloneElement(child, { key: index })
                   ^^^^^^^^^^^^
    3  return foo;
    4})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

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

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:7 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

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

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

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

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, (child, index) => (
  > 2  React.cloneElement(child, { key: index })
       ^^^^^^^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:7 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, (child, index) => (
  > 2  React.cloneElement(child, { key: index })
             ^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


React.Children.forEach(this.props.children, function (child, index) {
	return React.cloneElement(child, { key: index })
})

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

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, function (child,
    index) {
  > 2  return React.cloneElement(child, { key: index })
              ^^^^^^^^^^^^^^^^^^
    3})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:14 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, function (child,
    index) {
  > 2  return React.cloneElement(child, { key: index })
                    ^^^^^^^^^^^^
    3})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


React.Children.forEach(this.props.children, function (child, index) {
	const foo = React.cloneElement(child, { key: index })
	return foo;
})

 file.tsx:2:13 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, function (child,
    index) {
  > 2  const foo = React.cloneElement(child, { key: index })
                   ^^^^^^^^^^^^^^^^^^
    3  return foo;
    4})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:19 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, function (child,
    index) {
  > 2  const foo = React.cloneElement(child, { key: index })
                         ^^^^^^^^^^^^
    3  return foo;
    4})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1Children.forEach(this.props.children, (child, index) => (
  > 2  cloneElement(child, { key: index })
       ^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


Children.forEach(this.props.children, function (child, index) {
	return cloneElement(child, { key: index })
})

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

  Avoid using array index as key property in an element.

    1Children.forEach(this.props.children, function (child, index) {
  > 2  return cloneElement(child, { key: index })
              ^^^^^^^^^^^^
    3})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


Children.forEach(this.props.children, function (child, index) {
	const foo = cloneElement(child, { key: index })
	return foo;
})

 file.tsx:2:13 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1Children.forEach(this.props.children, function (child, index) {
  > 2  const foo = cloneElement(child, { key: index })
                   ^^^^^^^^^^^^
    3  return foo;
    4})

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1Children.forEach(this.props.children, (child, index) => (
  > 2  React.cloneElement(child, { key: index })
       ^^^^^^^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:7 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1Children.forEach(this.props.children, (child, index) => (
  > 2  React.cloneElement(child, { key: index })
             ^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


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

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1React.Children.forEach(this.props.children, (child, index) => (
  > 2  cloneElement(child, { key: index })
       ^^^^^^^^^^^^
    3))

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.map((thing, index) => (
	<Hello key={index} />
));

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.map((thing, index) => (
  > 2  <Hello key={index} />
       ^^^^^^^^^^^^^^^^^^^^^
    3));

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.map(function(thing, index) {
	return (<Hello key={index} />);
});

 file.tsx:2:9 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.map(function(thing, index) {
  > 2  return (<Hello key={index} />);
               ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.map((thing, index) => (
	React.cloneElement(thing, { key: index })
));

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.map((thing, index) => (
  > 2  React.cloneElement(thing, { key: index })
       ^^^^^^^^^^^^^^^^^^
    3));

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

 file.tsx:2:7 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.map((thing, index) => (
  > 2  React.cloneElement(thing, { key: index })
             ^^^^^^^^^^^^
    3));

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.map((thing, index) => (
	cloneElement(thing, { key: index })
));

 file.tsx:2:1 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.map((thing, index) => (
  > 2  cloneElement(thing, { key: index })
       ^^^^^^^^^^^^
    3));

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.map(function(thing, index){
	return cloneElement(thing, { key: index })
});

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

  Avoid using array index as key property in an element.

    1things.map(function(thing, index){
  > 2  return cloneElement(thing, { key: index })
              ^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.forEach((thing, index) => {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.forEach((thing, index) => {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.forEach(function(thing, index) {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.forEach(function(thing, index) {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.filter((thing, index) => {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.filter((thing, index) => {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.some((thing, index) => {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.some((thing, index) => {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.every((thing, index) => {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.every((thing, index) => {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.find((thing, index) => {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.find((thing, index) => {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.findIndex((thing, index) => {
	otherThings.push(<Hello key={index} />);
});

 file.tsx:2:18 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.findIndex((thing, index) => {
  > 2  otherThings.push(<Hello key={index} />);
                        ^^^^^^^^^^^^^^^^^^^^^
    3});

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.reduce((collection, thing, index) => (
	collection.concat(<Hello key={index} />)
), []);

 file.tsx:2:19 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.reduce((collection, thing, index) => (
  > 2  collection.concat(<Hello key={index} />)
                         ^^^^^^^^^^^^^^^^^^^^^
    3), []);

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.reduce(function(collection, thing, index) {
	return collection.concat(<Hello key={index} />)
}, []);

 file.tsx:2:26 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.reduce(function(collection, thing, index) {
  > 2  return collection.concat(<Hello key={index} />)
                                ^^^^^^^^^^^^^^^^^^^^^
    3}, []);

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.reduceRight((collection, thing, index) => (
	collection.concat(<Hello key={index} />)
), []);

 file.tsx:2:19 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.reduceRight((collection, thing, index) => (
  > 2  collection.concat(<Hello key={index} />)
                         ^^^^^^^^^^^^^^^^^^^^^
    3), []);

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.


things.reduceRight(function(collection, thing, index) {
	return collection.concat(<Hello key={index} />)
}, []);

 file.tsx:2:26 lint/react/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using array index as key property in an element.

    1things.reduceRight(function(collection, thing, index) {
  > 2  return collection.concat(<Hello key={index} />)
                                ^^^^^^^^^^^^^^^^^^^^^
    3}, []);

  See https://reactjs.org/docs/lists-and-keys.html#keys for more
    information.

Valid

things.map((thing) => (
	<Hello key={thing.id} />
));
things.map(function(thing) {
	return <Hello key={thing.id} />
});
things.map((thing) => (
	React.cloneElement(thing, { key: thing.id })
));
things.map(function(thing) {
	return React.cloneElement(thing, { key: thing.id })
});
things.forEach((thing) => {
	otherThings.push(<Hello key={thing.id} />);
});
things.forEach(function(thing) {
	otherThings.push(<Hello key={thing.id} />);
});
things.filter((thing) => {
	otherThings.push(<Hello key={thing.id} />);
});
things.filter(function(thing) {
	otherThings.push(<Hello key={thing.id} />);
});
things.some((thing) => {
	otherThings.push(<Hello key={thing.id} />);
});
things.some(function(thing) {
	otherThings.push(<Hello key={thing.id} />);
});
things.every((thing) => {
	otherThings.push(<Hello key={thing.id} />);
});
things.every(function(thing) {
	otherThings.push(<Hello key={thing.id} />);
});
things.find((thing) => {
	otherThings.push(<Hello key={thing.id} />);
});
things.find(function(thing) {
	otherThings.push(<Hello key={thing.id} />);
});
things.findIndex((thing) => {
	otherThings.push(<Hello key={thing.id} />);
});
things.findIndex(function(thing) {
	otherThings.push(<Hello key={thing.id} />);
});
things.reduce((collection, thing) => (
	collection.concat(<Hello key={thing.id} />)
), []);
things.reduce(function(collection, thing) {
	return collection.concat(<Hello key={thing.id} />)
}, []);
things.reduceRight((collection, thing) => (
	collection.concat(<Hello key={thing.id} />)
), []);
things.reduceRight(function(collection, thing) {
	return collection.concat(<Hello key={thing.id} />)
}, []);