Skip to content

linter: react/no-array-index-key false positive when index appears inside a template literal expression #21110

@ahmedelgabri

Description

@ahmedelgabri

What version of Oxlint are you using?

1.59.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?

react/no-array-index-key flags array index usage inside template literal expressions like key={`${item.type + index}`}. ESLint only flags direct usage like key={index} or simple expressions like key={1 + index}.

Minimal reproduction

test.tsx:

function List({items}: {items: {type: string; text: string}[]}) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={`${item.type + index}`}>{item.text}</li>
      ))}
    </ul>
  )
}

Expected: No error. The key combines item.type with index via string concatenation inside a template literal, producing a composite key.

Actual:

x eslint-plugin-react(no-array-index-key): Usage of Array index in keys is not allowed
  ,-[test.tsx:5:9]
4 |             {items.map((item, index) => (
5 |                 <li key={`${item.type + index}`}>{item.text}</li>
  :                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Metadata

Metadata

Assignees

No one assigned

    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