chore(eslint): enable @eslint-react/no-array-index-key rule#1060
Draft
carlosthe19916 wants to merge 6 commits into
Draft
chore(eslint): enable @eslint-react/no-array-index-key rule#1060carlosthe19916 wants to merge 6 commits into
carlosthe19916 wants to merge 6 commits into
Conversation
Replace array index keys with stable identifiers: use string templates, file metadata, or map entry keys instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
Reviewer's guide (collapsed on small PRs)Reviewer's GuideEnables the @eslint-react/no-array-index-key rule by replacing all React list keys that used array indices with stable identifiers derived from domain data or iteration metadata, and removes the rule override from the ESLint configuration. Flow diagram for enabling no-array-index-key rule and updating React list keysflowchart TD
EslintConfig --> EslintReactNoArrayIndexKey
EslintReactNoArrayIndexKey --> PackageTable
EslintReactNoArrayIndexKey --> VulnerabilitiesBySbom
EslintReactNoArrayIndexKey --> TableHeaderContentWithControls
EslintReactNoArrayIndexKey --> UploadFiles
EslintReactNoArrayIndexKey --> UploadFileForAnalysis
PackageTable -->|use key license.license_name| ReactListItem_PackageTable
VulnerabilitiesBySbom -->|use key orphan-purl.parentName| ReactRow_Vulnerabilities
TableHeaderContentWithControls -->|use key before-data-i after-data-i| ReactHeaderCells
UploadFiles -->|use key file.name-file.size-file.lastModified| ReactUploadItem
UploadFileForAnalysis -->|use key file.name-file.size-cancelled| ReactUploadErrorState
EslintReactNoArrayIndexKey:::rule
classDef rule fill:#fee2e2,stroke:#b91c1c,stroke-width:1px;
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- In
UploadFileForAnalysis, the.mapcallback signature was changed tomap((\1) => {but the body still referencesfileandupload, which will now be undefined; restore destructuring of the map entry (e.g.([file, upload])) so the variables used in the body exist. - For the orphan purl rows in
VulnerabilitiesBySbom, consider including the map entry key (e.g.purlKey) in thekeyprop instead of onlypurl.parentNameto avoid potential key collisions when multiple orphan entries share the same parent name.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `UploadFileForAnalysis`, the `.map` callback signature was changed to `map((\1) => {` but the body still references `file` and `upload`, which will now be undefined; restore destructuring of the map entry (e.g. `([file, upload])`) so the variables used in the body exist.
- For the orphan purl rows in `VulnerabilitiesBySbom`, consider including the map entry key (e.g. `purlKey`) in the `key` prop instead of only `purl.parentName` to avoid potential key collisions when multiple orphan entries share the same parent name.
## Individual Comments
### Comment 1
<location path="client/src/app/pages/sbom-details/vulnerabilities-by-sbom.tsx" line_range="393-395" />
<code_context>
<Tbody>
- {Array.from(item.purls.values()).map(
- (purl, index) => {
+ {Array.from(item.purls.entries()).map(
+ ([purlKey, purl]) => {
if (!purl.isOrphan) {
</code_context>
<issue_to_address>
**suggestion (bug_risk):** The orphan row key based only on `parentName` may not be unique across purls.
Previously the index in the key guaranteed uniqueness. With `key={`orphan-${purl.parentName}`}` you can get duplicate keys when multiple orphans share the same `parentName`. Now that you have `purlKey` from `entries()`, please use that (e.g. `key={`orphan-${purlKey}`}`) to ensure keys remain unique and stable without relying on the index.
```suggestion
<Tr
key={`orphan-${purlKey}`}
>
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
393
to
395
| <Tr | ||
| key={`${purl.parentName}-${index}-name`} | ||
| key={`orphan-${purl.parentName}`} | ||
| > |
Contributor
There was a problem hiding this comment.
suggestion (bug_risk): The orphan row key based only on parentName may not be unique across purls.
Previously the index in the key guaranteed uniqueness. With key={orphan-${purl.parentName}} you can get duplicate keys when multiple orphans share the same parentName. Now that you have purlKey from entries(), please use that (e.g. key={orphan-${purlKey}}) to ensure keys remain unique and stable without relying on the index.
Suggested change
| <Tr | |
| key={`${purl.parentName}-${index}-name`} | |
| key={`orphan-${purl.parentName}`} | |
| > | |
| <Tr | |
| key={`orphan-${purlKey}`} | |
| > |
- Fix UploadFileForAnalysis.tsx corrupted by sed (restore destructuring, replace index keys with file.size) - Suppress no-array-index-key for filler Th cells that have no identity beyond position Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #1060 +/- ##
=======================================
Coverage 50.68% 50.68%
=======================================
Files 253 253
Lines 5499 5499
Branches 1660 1660
=======================================
Hits 2787 2787
Misses 2440 2440
Partials 272 272
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@eslint-react/no-array-index-keyoverride from ESLint configTest plan
npm run lintpasses with 0 warnings🤖 Generated with Claude Code
Summary by Sourcery
Enable ESLint enforcement against using array indexes as React keys and update existing components to use stable identifiers for list keys.
Enhancements:
Build: