jsx-eslint/eslint-plugin-react

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

Open

#3,185 opened on Jan 21, 2022

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

Repository metrics

Stars
 (8,630 stars)
PR merge metrics
 (No merged PRs in 30d)

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

Research direction
Investigate how to use TypeScript type information in eslint rules, specifically using typescript eslint's type checker to identify 'key' property in spread expressions.
Tech stack
javascripttypescriptreact
Domain
developer experience
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
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.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptESLintReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65