jsx-eslint/eslint-plugin-react
Vedi su GitHub[react/jsx-key] Take advantage of type information, if available.
Open
#3185 aperta il 21 gen 2022
help wantedtypescript
Metriche repository
- Star
- (8630 star)
- Metriche merge PR
- (Nessuna PR mergiata in 30 g)
Descrizione
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.