Skip to content

linter: react/no-array-index-key diagnostic span on React.cloneElement prevents eslint-disable suppression #20940

@ahmedelgabri

Description

@ahmedelgabri

What version of Oxlint are you using?

1.58.0

What command did you run?

oxlint -c oxlint.json test.tsx

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

{
  "plugins": ["react"],
  "rules": {
    "react/no-array-index-key": "error"
  }
}

What happened?

When react/no-array-index-key fires on a React.cloneElement call, the diagnostic is reported at the entire props object expression span instead of the specific key property. This prevents eslint-disable-next-line comments from suppressing the violation.

Minimal reproduction (playground)

test.tsx:

import React from 'react'

function Clone({children}: {children: React.ReactElement[]}) {
  return (
    <div>
      {children.map((child, key) =>
        React.cloneElement(child, {
          // eslint-disable-next-line react/no-array-index-key
          key,
        })
      )}
    </div>
  )
}

Expected: The eslint-disable-next-line on the line before key, suppresses the violation (as it does in ESLint 7 and 10).

Actual:

x eslint-plugin-react(no-array-index-key): Usage of Array index in keys is not allowed
  ,-[test.tsx:7:31]
6 |                 {children.map((child, key) =>
7 | ,->                 React.cloneElement(child, {
8 | |                       // eslint-disable-next-line react/no-array-index-key
9 | |                       key,
10| `->                 })

The violation spans lines 7-10 (the entire object expression), so the eslint-disable-next-line on line 8 (targeting line 9) does not cover the span start at line 7.

ESLint comparison

Both ESLint 7.23.0 and ESLint 10.1.0 (with eslint-plugin-react@7.37.5) correctly suppress this with eslint-disable-next-line.

Metadata

Metadata

Assignees

Labels

Type

Priority

None yet

Effort

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions