Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react/no-array-index-key - Breaking this.props.children in to chunks and using index as a key #1123

Closed
penx opened this issue Mar 23, 2017 · 4 comments
Labels

Comments

@penx
Copy link
Contributor

penx commented Mar 23, 2017

Are there circumstances when it is ok to use array index as a key? If so, could these exceptions be added to the documentation here:

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md

I have run in to an issue where I am breaking down this.props.children in to several chunks in order to render them in a grid - but I can't see how I could use anything other than the array index as an identifier - more information here:

http://stackoverflow.com/questions/42983067/breaking-children-in-to-chunks-and-react-no-array-index-key

@ljharb
Copy link
Member

ljharb commented Mar 23, 2017

If there's nothing unique about the items, then you'd simply disable the rule with an override.

@NullDivision
Copy link

@penx If you have a static set it should be ok to use the array index as values. If you have other features (eg. filtering) then it's recommended to use a unique key to avoid index collisions since React uses keys first to check if a node should be updated.

@ljharb ljharb added the question label May 4, 2017
@ljharb ljharb closed this as completed May 4, 2017
@mewhit
Copy link

mewhit commented Feb 5, 2019

You can use simple 'hack'
<span> key={String(index)} </span>
And you don't pollute your code with inline disabled.

@ljharb
Copy link
Member

ljharb commented Feb 5, 2019

That’s just defeating the purpose of the rule. Might as well turn it off.

github-actions bot pushed a commit to capitnflam/eslint-plugin that referenced this issue Mar 16, 2024
# [1.1.0](v1.0.1...v1.1.0) (2024-03-16)

### chore

* **deps-dev:** bump [@types](https://github.com/types)/node from 20.11.27 to 20.11.28 ([#13](#13)) ([738e28c](738e28c))
* **deps:** bump eslint-plugin-react from 7.34.0 to 7.34.1 ([#12](#12)) ([ad9f1b3](ad9f1b3)), closes [#3700](https://github.com/capitnflam/eslint-plugin/issues/3700) [#3701](https://github.com/capitnflam/eslint-plugin/issues/3701) [#3704](https://github.com/capitnflam/eslint-plugin/issues/3704) [#3705](https://github.com/capitnflam/eslint-plugin/issues/3705) [#3707](https://github.com/capitnflam/eslint-plugin/issues/3707) [#3713](https://github.com/capitnflam/eslint-plugin/issues/3713) [#3715](https://github.com/capitnflam/eslint-plugin/issues/3715) [#1000](https://github.com/capitnflam/eslint-plugin/issues/1000) [jsx-eslint/eslint-plugin-react#1000](jsx-eslint/eslint-plugin-react#1000) [#1002](https://github.com/capitnflam/eslint-plugin/issues/1002) [jsx-eslint/eslint-plugin-react#1002](jsx-eslint/eslint-plugin-react#1002) [#1005](https://github.com/capitnflam/eslint-plugin/issues/1005) [jsx-eslint/eslint-plugin-react#1005](jsx-eslint/eslint-plugin-react#1005) [#100](https://github.com/capitnflam/eslint-plugin/issues/100) [jsx-eslint/eslint-plugin-react#100](jsx-eslint/eslint-plugin-react#100) [#1010](https://github.com/capitnflam/eslint-plugin/issues/1010) [jsx-eslint/eslint-plugin-react#1010](jsx-eslint/eslint-plugin-react#1010) [#1013](https://github.com/capitnflam/eslint-plugin/issues/1013) [jsx-eslint/eslint-plugin-react#1013](jsx-eslint/eslint-plugin-react#1013) [#1022](https://github.com/capitnflam/eslint-plugin/issues/1022) [jsx-eslint/eslint-plugin-react#1022](jsx-eslint/eslint-plugin-react#1022) [#1029](https://github.com/capitnflam/eslint-plugin/issues/1029) [jsx-eslint/eslint-plugin-react#1029](jsx-eslint/eslint-plugin-react#1029) [#102](https://github.com/capitnflam/eslint-plugin/issues/102) [jsx-eslint/eslint-plugin-react#102](jsx-eslint/eslint-plugin-react#102) [#1034](https://github.com/capitnflam/eslint-plugin/issues/1034) [jsx-eslint/eslint-plugin-react#1034](jsx-eslint/eslint-plugin-react#1034) [#1038](https://github.com/capitnflam/eslint-plugin/issues/1038) [jsx-eslint/eslint-plugin-react#1038](jsx-eslint/eslint-plugin-react#1038) [#1041](https://github.com/capitnflam/eslint-plugin/issues/1041) [jsx-eslint/eslint-plugin-react#1041](jsx-eslint/eslint-plugin-react#1041) [#1043](https://github.com/capitnflam/eslint-plugin/issues/1043) [jsx-eslint/eslint-plugin-react#1043](jsx-eslint/eslint-plugin-react#1043) [#1046](https://github.com/capitnflam/eslint-plugin/issues/1046) [jsx-eslint/eslint-plugin-react#1046](jsx-eslint/eslint-plugin-react#1046) [#1047](https://github.com/capitnflam/eslint-plugin/issues/1047) [jsx-eslint/eslint-plugin-react#1047](jsx-eslint/eslint-plugin-react#1047) [#1050](https://github.com/capitnflam/eslint-plugin/issues/1050) [jsx-eslint/eslint-plugin-react#1050](jsx-eslint/eslint-plugin-react#1050) [#1053](https://github.com/capitnflam/eslint-plugin/issues/1053) [jsx-eslint/eslint-plugin-react#1053](jsx-eslint/eslint-plugin-react#1053) [#1057](https://github.com/capitnflam/eslint-plugin/issues/1057) [jsx-eslint/eslint-plugin-react#1057](jsx-eslint/eslint-plugin-react#1057) [#105](https://github.com/capitnflam/eslint-plugin/issues/105) [jsx-eslint/eslint-plugin-react#105](jsx-eslint/eslint-plugin-react#105) [#1061](https://github.com/capitnflam/eslint-plugin/issues/1061) [jsx-eslint/eslint-plugin-react#1061](jsx-eslint/eslint-plugin-react#1061) [#1062](https://github.com/capitnflam/eslint-plugin/issues/1062) [jsx-eslint/eslint-plugin-react#1062](jsx-eslint/eslint-plugin-react#1062) [#1070](https://github.com/capitnflam/eslint-plugin/issues/1070) [jsx-eslint/eslint-plugin-react#1070](jsx-eslint/eslint-plugin-react#1070) [#1071](https://github.com/capitnflam/eslint-plugin/issues/1071) [jsx-eslint/eslint-plugin-react#1071](jsx-eslint/eslint-plugin-react#1071) [#1073](https://github.com/capitnflam/eslint-plugin/issues/1073) [jsx-eslint/eslint-plugin-react#1073](jsx-eslint/eslint-plugin-react#1073) [#1076](https://github.com/capitnflam/eslint-plugin/issues/1076) [jsx-eslint/eslint-plugin-react#1076](jsx-eslint/eslint-plugin-react#1076) [#1079](https://github.com/capitnflam/eslint-plugin/issues/1079) [jsx-eslint/eslint-plugin-react#1079](jsx-eslint/eslint-plugin-react#1079) [#1088](https://github.com/capitnflam/eslint-plugin/issues/1088) [jsx-eslint/eslint-plugin-react#1088](jsx-eslint/eslint-plugin-react#1088) [#1098](https://github.com/capitnflam/eslint-plugin/issues/1098) [jsx-eslint/eslint-plugin-react#1098](jsx-eslint/eslint-plugin-react#1098) [#1101](https://github.com/capitnflam/eslint-plugin/issues/1101) [jsx-eslint/eslint-plugin-react#1101](jsx-eslint/eslint-plugin-react#1101) [#1103](https://github.com/capitnflam/eslint-plugin/issues/1103) [jsx-eslint/eslint-plugin-react#1103](jsx-eslint/eslint-plugin-react#1103) [#110](https://github.com/capitnflam/eslint-plugin/issues/110) [jsx-eslint/eslint-plugin-react#110](jsx-eslint/eslint-plugin-react#110) [#1116](https://github.com/capitnflam/eslint-plugin/issues/1116) [jsx-eslint/eslint-plugin-react#1116](jsx-eslint/eslint-plugin-react#1116) [#1117](https://github.com/capitnflam/eslint-plugin/issues/1117) [jsx-eslint/eslint-plugin-react#1117](jsx-eslint/eslint-plugin-react#1117) [#1119](https://github.com/capitnflam/eslint-plugin/issues/1119) [jsx-eslint/eslint-plugin-react#1119](jsx-eslint/eslint-plugin-react#1119) [#1121](https://github.com/capitnflam/eslint-plugin/issues/1121) [jsx-eslint/eslint-plugin-react#1121](jsx-eslint/eslint-plugin-react#1121) [#1122](https://github.com/capitnflam/eslint-plugin/issues/1122) [jsx-eslint/eslint-plugin-react#1122](jsx-eslint/eslint-plugin-react#1122) [#1123](https://github.com/capitnflam/eslint-plugin/issues/1123) [jsx-eslint/eslint-plugin-react#1123](jsx-eslint/eslint-plugin-react#1123) [#3700](https://github.com/capitnflam/eslint-plugin/issues/3700) [#3701](https://github.com/capitnflam/eslint-plugin/issues/3701) [#3704](https://github.com/capitnflam/eslint-plugin/issues/3704) [#3705](https://github.com/capitnflam/eslint-plugin/issues/3705) [#3707](https://github.com/capitnflam/eslint-plugin/issues/3707) [#3713](https://github.com/capitnflam/eslint-plugin/issues/3713) [#3715](https://github.com/capitnflam/eslint-plugin/issues/3715) [#3715](https://github.com/capitnflam/eslint-plugin/issues/3715) [jsx-eslint/eslint-plugin-react#3715](jsx-eslint/eslint-plugin-react#3715) [#3713](https://github.com/capitnflam/eslint-plugin/issues/3713) [jsx-eslint/eslint-plugin-react#3713](jsx-eslint/eslint-plugin-react#3713) [#3707](https://github.com/capitnflam/eslint-plugin/issues/3707) [jsx-eslint/eslint-plugin-react#3707](jsx-eslint/eslint-plugin-react#3707) [#3705](https://github.com/capitnflam/eslint-plugin/issues/3705) [jsx-eslint/eslint-plugin-react#3705](jsx-eslint/eslint-plugin-react#3705) [#3704](https://github.com/capitnflam/eslint-plugin/issues/3704) [jsx-eslint/eslint-plugin-react#3704](jsx-eslint/eslint-plugin-react#3704) [#3701](https://github.com/capitnflam/eslint-plugin/issues/3701) [jsx-eslint/eslint-plugin-react#3701](jsx-eslint/eslint-plugin-react#3701) [#3700](https://github.com/capitnflam/eslint-plugin/issues/3700) [jsx-eslint/eslint-plugin-react#3700](jsx-eslint/eslint-plugin-react#3700)

### ci

* add auto assign action ([#14](#14)) ([07d1f9a](07d1f9a))
* add check workflow ([#11](#11)) ([8afc82a](8afc82a))

### feat

* add [@eslint-community](https://github.com/eslint-community)/eslint-plugin-eslint-comments ([#17](#17)) ([fe2bf30](fe2bf30))
* add eslint-plugin-n ([#18](#18)) ([203d603](203d603))
* add eslint-plugin-security ([#16](#16)) ([e7f8c2e](e7f8c2e))
* add eslint-plugin-sonarjs ([#15](#15)) ([5bca4e1](5bca4e1))
* **react:** add some security linting ([#10](#10)) ([4424b67](4424b67))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

4 participants