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

[salemhilal]

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.