Table cell type error
kieranhood opened this issue · comments
I'm getting the following error on the table component.
ERROR in src/components/Elements/Table/Table.tsx:57:25 TS2322: Type 'Element | Entry[keyof Entry]' is not assignable to type 'ReactNode'. Type 'Entry[keyof Entry]' is not assignable to type 'ReactNode'. Type 'Entry[string] | Entry[number] | Entry[symbol]' is not assignable to type 'ReactNode'. Type 'Entry[string]' is not assignable to type 'ReactNode'. Type 'Entry[string]' is not assignable to type 'ReactPortal'. Type 'Entry[keyof Entry]' is not assignable to type 'ReactPortal'. Type 'Entry[string] | Entry[number] | Entry[symbol]' is not assignable to type 'ReactPortal'. Type 'Entry[string]' is not assignable to type 'ReactPortal'.
I presume there is a problem with the TableColumn type definition.
type TableColumn<Entry> = { title: string; field: keyof Entry; Cell?({ entry }: { entry: Entry }): React.ReactElement; };
I'm only just learning TS and haven't been able to figure out what the Cell type definition is doing. An explanation on this would be greatly appreciated!
Actually I think this issue is caused because I upgraded to React 18. My solution specify the type of entry[field] as any.
//Table.tsx Line 55 {Cell ? <Cell entry={entry} /> : entry[field] as any}
Seems to do the trick but I'm sure theres a more proper way of solving this.
Yeah, I'm a TS newbie as well, and I was facing the same issue, I managed to fix/hack it by changing, this:
export const Table = <Entry extends { id: string }>({ data, columns }: TableProps<Entry>) => {
To this:
export const Table = <Entry extends Record<string, any> & { id: string }>({ data, columns }: TableProps<Entry>) => {
Another possible solutions-
{Cell ? <Cell entry={entry} /> : entry[field] as React.ReactNode}