jsx-eslint/eslint-plugin-react
Ver no GitHub[react/jsx-key] Take advantage of type information, if available.
Open
#3.185 aberto em 21 de jan. de 2022
help wantedtypescript
Métricas do repositório
- Stars
- (8.630 stars)
- Métricas de merge de PR
- (Nenhuma PRs mesclada em 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.