jsx-eslint/eslint-plugin-react

[react/jsx-key] Take advantage of type information, if available.

Open

#3185 opened on Jan 21, 2022

View on GitHub
 (0 comments) (10 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
help wantedtypescript

Description

This issue was opened as a follow-up to #2258.

The problem

It's not uncommon to get props that then need to be spread over an element. Here's an abridged example from react-table:

const { rows } = useTable(/* ... */);
return (
  <tbody>
    {rows.map((row) => (
      <tr {...row.getRowProps()}>
        {row.cells.map((cell) => (
          <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
        ))}
      </tr>
    ))}
  </tbody>
);

Here, getRowProps() and getCellProps() provide a key property for you. Currently, react/jsx-key can't detect this and marks the tr and td elements as invalid.

A possible solution

With access to type information provided by something like typescript-eslint, this rule could get access to the names of spread properties and see if key is one of them.

Contributor guide

Tech stack
javascripttypescriptreact
Domain
frontendtooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ESLint plugin developmentReact JSXTypeScript type system
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
This issue proposes enhancing the `react/jsx key` rule to use type information from typescript eslint to detect 'key' in spread props (e.g., `{...getRowProps()}`). The implementor should first study the current rule implementation in `lib/rules/jsx key.js` and understand how it currently checks for keys. Then, they should explore the typescript eslint package to see if there is a way to access type information for spread expressions, possibly via `services.getTypeChecker()`. The linked issue #2258 provides additional context. Finally, they need to integrate this type checking into the rule's logic to suppress false positives when a key is present in the spread.