noArrayIndexKey
このコンテンツはまだ日本語訳がありません。
Diagnostic Category: lint/suspicious/noArrayIndexKey
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
Section titled ExamplesInvalid
Section titled Invalidsomething.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-${index}} >foo</Component>
│ ^^^^^
3 │ });
4 │
ℹ This is the source of the key value.
> 1 │ something.forEach((Element, index) => {
│ ^^^^^
2 │ <Component key={test-key-${index}} >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
Section titled Validsomething.forEach((item) => { <Component key={item.id} >foo</Component>});something.forEach((item) => { <Component key={item.baz.foo} >foo</Component>});