---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
import { Children, cloneElement } from "react";

something.forEach((Element, index) => {
    <Component key={index}>foo</Component>;
});
something.forEach((element, index, array) => {
    <Component key={index}>foo</Component>;
});
things.filter((thing, index) => {
    otherThings.push(<Hello key={index}>foo</Hello>);
});

something.forEach((Element, index) => {
    <Component key={index} />;
});
something.forEach((element, index, array) => {
    <Component key={index} />;
});
things.filter((thing, index) => {
    otherThings.push(<Hello key={index} />);
});
things.reduce(
    (collection, thing, index) => collection.concat(<Hello key={index} />),
    []
);

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

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

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

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

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

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

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

things.flatMap((thing, index) => {
    return <Component key={index} />;
});

Array.from(things, (thing, index) => {
    return <Component key={index} />;
});

const mapping = {
    foo: () => things.map((_, index) => <Component key={index} />),
};

class A extends React.Component {
    renderThings = () => things.map((_, index) => <Component key={index} />);
}

const Component1 = () => things.map((_, index) => <Component key={index} />);

const Component2 = () => things.map((_, index) => <Component key={index} />);

function Component3() {
    return things.map((_, index) => <Component key={index} />);
}

function Component4() {
    let elements = things.map((_, index) => <Component key={index} />);
    if (condition) {
        elements = others.map((_, index) => <Component key={index} />);
    }
    return elements;
}

function Component5({ things }) {
    const elements = useMemo(
        () => things.map((_, index) => <Component key={index} />),
        [things]
    );
    return elements;
}

function Component6({ things }) {
    const elements = useMemo(
        () => things.map((_, index) => <Component key={index} />),
        [things]
    );
    return elements;
}

function Component7() {
    return (
        <HoC>
            {({ things }) => things.map((_, index) => <Component key={index} />)}
        </HoC>
    );
}
 
function Component8() {
    return (
        <HoC>
            {({ things }) => things.map((_, index) => <Component key={`test-key-${index}`} />)}
        </HoC>
    );
}

function Component9() {
    return (
        <HoC>
            {({ things }) => things.map((_, index) => <Component key={"test" + index} />)}
        </HoC>
    );
}

function Component10() {
    return (
        <HoC>
            {({ things }) => things.map((_, index) => <Component key={"test" + index + "test"} />)}
        </HoC>
    );
}
```

# Diagnostics
```
invalid.jsx:4:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

```

```
invalid.jsx:7:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    5 │ });
    6 │ something.forEach((element, index, array) => {
  > 7 │     <Component key={index}>foo</Component>;
      │                     ^^^^^
    8 │ });
    9 │ things.filter((thing, index) => {
  
  i This is the source of the key value.
  
    4 │     <Component key={index}>foo</Component>;
    5 │ });
  > 6 │ something.forEach((element, index, array) => {
      │                             ^^^^^
    7 │     <Component key={index}>foo</Component>;
    8 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:10:34 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
     8 │ });
     9 │ things.filter((thing, index) => {
  > 10 │     otherThings.push(<Hello key={index}>foo</Hello>);
       │                                  ^^^^^
    11 │ });
    12 │ 
  
  i This is the source of the key value.
  
     7 │     <Component key={index}>foo</Component>;
     8 │ });
   > 9 │ things.filter((thing, index) => {
       │                       ^^^^^
    10 │     otherThings.push(<Hello key={index}>foo</Hello>);
    11 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:14:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    13 │ something.forEach((Element, index) => {
  > 14 │     <Component key={index} />;
       │                     ^^^^^
    15 │ });
    16 │ something.forEach((element, index, array) => {
  
  i This is the source of the key value.
  
    11 │ });
    12 │ 
  > 13 │ something.forEach((Element, index) => {
       │                             ^^^^^
    14 │     <Component key={index} />;
    15 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:17:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    15 │ });
    16 │ something.forEach((element, index, array) => {
  > 17 │     <Component key={index} />;
       │                     ^^^^^
    18 │ });
    19 │ things.filter((thing, index) => {
  
  i This is the source of the key value.
  
    14 │     <Component key={index} />;
    15 │ });
  > 16 │ something.forEach((element, index, array) => {
       │                             ^^^^^
    17 │     <Component key={index} />;
    18 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:20:34 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    18 │ });
    19 │ things.filter((thing, index) => {
  > 20 │     otherThings.push(<Hello key={index} />);
       │                                  ^^^^^
    21 │ });
    22 │ things.reduce(
  
  i This is the source of the key value.
  
    17 │     <Component key={index} />;
    18 │ });
  > 19 │ things.filter((thing, index) => {
       │                       ^^^^^
    20 │     otherThings.push(<Hello key={index} />);
    21 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:23:65 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    21 │ });
    22 │ things.reduce(
  > 23 │     (collection, thing, index) => collection.concat(<Hello key={index} />),
       │                                                                 ^^^^^
    24 │     []
    25 │ );
  
  i This is the source of the key value.
  
    21 │ });
    22 │ things.reduce(
  > 23 │     (collection, thing, index) => collection.concat(<Hello key={index} />),
       │                         ^^^^^
    24 │     []
    25 │ );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:28:38 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    27 │ React.Children.map(this.props.children, (child, index) =>
  > 28 │     React.cloneElement(child, { key: index })
       │                                      ^^^^^
    29 │ );
    30 │ 
  
  i This is the source of the key value.
  
    25 │ );
    26 │ 
  > 27 │ React.Children.map(this.props.children, (child, index) =>
       │                                                 ^^^^^
    28 │     React.cloneElement(child, { key: index })
    29 │ );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:32:45 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    31 │ React.Children.forEach(this.props.children, function (child, index) {
  > 32 │     return React.cloneElement(child, { key: index });
       │                                             ^^^^^
    33 │ });
    34 │ 
  
  i This is the source of the key value.
  
    29 │ );
    30 │ 
  > 31 │ React.Children.forEach(this.props.children, function (child, index) {
       │                                                              ^^^^^
    32 │     return React.cloneElement(child, { key: index });
    33 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:36:32 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    35 │ Children.map(this.props.children, (child, index) =>
  > 36 │     cloneElement(child, { key: index })
       │                                ^^^^^
    37 │ );
    38 │ 
  
  i This is the source of the key value.
  
    33 │ });
    34 │ 
  > 35 │ Children.map(this.props.children, (child, index) =>
       │                                           ^^^^^
    36 │     cloneElement(child, { key: index })
    37 │ );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:40:39 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    39 │ Children.forEach(this.props.children, function (child, index) {
  > 40 │     return cloneElement(child, { key: index });
       │                                       ^^^^^
    41 │ });
    42 │ 
  
  i This is the source of the key value.
  
    37 │ );
    38 │ 
  > 39 │ Children.forEach(this.props.children, function (child, index) {
       │                                                        ^^^^^
    40 │     return cloneElement(child, { key: index });
    41 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:44:44 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    43 │ Children.forEach(this.props.children, function (child, index) {
  > 44 │     const foo = cloneElement(child, { key: index });
       │                                            ^^^^^
    45 │     return foo;
    46 │ });
  
  i This is the source of the key value.
  
    41 │ });
    42 │ 
  > 43 │ Children.forEach(this.props.children, function (child, index) {
       │                                                        ^^^^^
    44 │     const foo = cloneElement(child, { key: index });
    45 │     return foo;
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:50:43 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    48 │ function Test(props) {
    49 │     return Children.map(props.children, function (child, index) {
  > 50 │         return cloneElement(child, { key: index });
       │                                           ^^^^^
    51 │     });
    52 │ }
  
  i This is the source of the key value.
  
    48 │ function Test(props) {
  > 49 │     return Children.map(props.children, function (child, index) {
       │                                                          ^^^^^
    50 │         return cloneElement(child, { key: index });
    51 │     });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:54:63 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    52 │ }
    53 │ 
  > 54 │ things.map((thing, index) => React.cloneElement(thing, { key: index }));
       │                                                               ^^^^^
    55 │ 
    56 │ things.flatMap((thing, index) => {
  
  i This is the source of the key value.
  
    52 │ }
    53 │ 
  > 54 │ things.map((thing, index) => React.cloneElement(thing, { key: index }));
       │                    ^^^^^
    55 │ 
    56 │ things.flatMap((thing, index) => {
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:57:28 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    56 │ things.flatMap((thing, index) => {
  > 57 │     return <Component key={index} />;
       │                            ^^^^^
    58 │ });
    59 │ 
  
  i This is the source of the key value.
  
    54 │ things.map((thing, index) => React.cloneElement(thing, { key: index }));
    55 │ 
  > 56 │ things.flatMap((thing, index) => {
       │                        ^^^^^
    57 │     return <Component key={index} />;
    58 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:61:28 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    60 │ Array.from(things, (thing, index) => {
  > 61 │     return <Component key={index} />;
       │                            ^^^^^
    62 │ });
    63 │ 
  
  i This is the source of the key value.
  
    58 │ });
    59 │ 
  > 60 │ Array.from(things, (thing, index) => {
       │                            ^^^^^
    61 │     return <Component key={index} />;
    62 │ });
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:65:57 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    64 │ const mapping = {
  > 65 │     foo: () => things.map((_, index) => <Component key={index} />),
       │                                                         ^^^^^
    66 │ };
    67 │ 
  
  i This is the source of the key value.
  
    64 │ const mapping = {
  > 65 │     foo: () => things.map((_, index) => <Component key={index} />),
       │                               ^^^^^
    66 │ };
    67 │ 
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:69:67 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    68 │ class A extends React.Component {
  > 69 │     renderThings = () => things.map((_, index) => <Component key={index} />);
       │                                                                   ^^^^^
    70 │ }
    71 │ 
  
  i This is the source of the key value.
  
    68 │ class A extends React.Component {
  > 69 │     renderThings = () => things.map((_, index) => <Component key={index} />);
       │                                         ^^^^^
    70 │ }
    71 │ 
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:72:67 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    70 │ }
    71 │ 
  > 72 │ const Component1 = () => things.map((_, index) => <Component key={index} />);
       │                                                                   ^^^^^
    73 │ 
    74 │ const Component2 = () => things.map((_, index) => <Component key={index} />);
  
  i This is the source of the key value.
  
    70 │ }
    71 │ 
  > 72 │ const Component1 = () => things.map((_, index) => <Component key={index} />);
       │                                         ^^^^^
    73 │ 
    74 │ const Component2 = () => things.map((_, index) => <Component key={index} />);
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:74:67 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    72 │ const Component1 = () => things.map((_, index) => <Component key={index} />);
    73 │ 
  > 74 │ const Component2 = () => things.map((_, index) => <Component key={index} />);
       │                                                                   ^^^^^
    75 │ 
    76 │ function Component3() {
  
  i This is the source of the key value.
  
    72 │ const Component1 = () => things.map((_, index) => <Component key={index} />);
    73 │ 
  > 74 │ const Component2 = () => things.map((_, index) => <Component key={index} />);
       │                                         ^^^^^
    75 │ 
    76 │ function Component3() {
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:77:53 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    76 │ function Component3() {
  > 77 │     return things.map((_, index) => <Component key={index} />);
       │                                                     ^^^^^
    78 │ }
    79 │ 
  
  i This is the source of the key value.
  
    76 │ function Component3() {
  > 77 │     return things.map((_, index) => <Component key={index} />);
       │                           ^^^^^
    78 │ }
    79 │ 
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:81:61 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    80 │ function Component4() {
  > 81 │     let elements = things.map((_, index) => <Component key={index} />);
       │                                                             ^^^^^
    82 │     if (condition) {
    83 │         elements = others.map((_, index) => <Component key={index} />);
  
  i This is the source of the key value.
  
    80 │ function Component4() {
  > 81 │     let elements = things.map((_, index) => <Component key={index} />);
       │                                   ^^^^^
    82 │     if (condition) {
    83 │         elements = others.map((_, index) => <Component key={index} />);
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:83:61 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    81 │     let elements = things.map((_, index) => <Component key={index} />);
    82 │     if (condition) {
  > 83 │         elements = others.map((_, index) => <Component key={index} />);
       │                                                             ^^^^^
    84 │     }
    85 │     return elements;
  
  i This is the source of the key value.
  
    81 │     let elements = things.map((_, index) => <Component key={index} />);
    82 │     if (condition) {
  > 83 │         elements = others.map((_, index) => <Component key={index} />);
       │                                   ^^^^^
    84 │     }
    85 │     return elements;
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:90:56 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    88 │ function Component5({ things }) {
    89 │     const elements = useMemo(
  > 90 │         () => things.map((_, index) => <Component key={index} />),
       │                                                        ^^^^^
    91 │         [things]
    92 │     );
  
  i This is the source of the key value.
  
    88 │ function Component5({ things }) {
    89 │     const elements = useMemo(
  > 90 │         () => things.map((_, index) => <Component key={index} />),
       │                              ^^^^^
    91 │         [things]
    92 │     );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:98:56 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
     96 │ function Component6({ things }) {
     97 │     const elements = useMemo(
   > 98 │         () => things.map((_, index) => <Component key={index} />),
        │                                                        ^^^^^
     99 │         [things]
    100 │     );
  
  i This is the source of the key value.
  
     96 │ function Component6({ things }) {
     97 │     const elements = useMemo(
   > 98 │         () => things.map((_, index) => <Component key={index} />),
        │                              ^^^^^
     99 │         [things]
    100 │     );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:107:71 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    105 │     return (
    106 │         <HoC>
  > 107 │             {({ things }) => things.map((_, index) => <Component key={index} />)}
        │                                                                       ^^^^^
    108 │         </HoC>
    109 │     );
  
  i This is the source of the key value.
  
    105 │     return (
    106 │         <HoC>
  > 107 │             {({ things }) => things.map((_, index) => <Component key={index} />)}
        │                                             ^^^^^
    108 │         </HoC>
    109 │     );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:115:83 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    113 │     return (
    114 │         <HoC>
  > 115 │             {({ things }) => things.map((_, index) => <Component key={`test-key-${index}`} />)}
        │                                                                                   ^^^^^
    116 │         </HoC>
    117 │     );
  
  i This is the source of the key value.
  
    113 │     return (
    114 │         <HoC>
  > 115 │             {({ things }) => things.map((_, index) => <Component key={`test-key-${index}`} />)}
        │                                             ^^^^^
    116 │         </HoC>
    117 │     );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:123:80 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    121 │     return (
    122 │         <HoC>
  > 123 │             {({ things }) => things.map((_, index) => <Component key={"test" + index} />)}
        │                                                                                ^^^^^
    124 │         </HoC>
    125 │     );
  
  i This is the source of the key value.
  
    121 │     return (
    122 │         <HoC>
  > 123 │             {({ things }) => things.map((_, index) => <Component key={"test" + index} />)}
        │                                             ^^^^^
    124 │         </HoC>
    125 │     );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```

```
invalid.jsx:131:80 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using the index of an array as key property in an element.
  
    129 │     return (
    130 │         <HoC>
  > 131 │             {({ things }) => things.map((_, index) => <Component key={"test" + index + "test"} />)}
        │                                                                                ^^^^^
    132 │         </HoC>
    133 │     );
  
  i This is the source of the key value.
  
    129 │     return (
    130 │         <HoC>
  > 131 │             {({ things }) => things.map((_, index) => <Component key={"test" + index + "test"} />)}
        │                                             ^^^^^
    132 │         </HoC>
    133 │     );
  
  i The order of the items may change, and this also affects performances and component state.
  
  i Check the React documentation. 
  

```