T
TanStack•3y ago
fair-rose

[v7] Upgrading from React 17 to React 18 - how to use strings as Cells?

Hi all, I'm currently in the process of upgrading a project from React 17 to React 18 and I'm running into an issue where previously, I was able to render strings as Cells for my column definitions. E.g. 
                {
                    Header: t("common.from").toString(),
                    accessor: (rentalOrder) => WDate.toSortString(rentalOrder.from),
                    Cell: ({ row }: CellProps<SearchResultRentalOrder>) => WDate.toShortString(row.original.from)
                },
                {
                    Header: t("common.from").toString(),
                    accessor: (rentalOrder) => WDate.toSortString(rentalOrder.from),
                    Cell: ({ row }: CellProps<SearchResultRentalOrder>) => WDate.toShortString(row.original.from)
                },
This is for react-table 7 by the way. In React 17 this was allowed, yet in React 18 I'm getting an error: 
 Type 'string' is not assignable to type 'ReactElement<any, any>'
 Type 'string' is not assignable to type 'ReactElement<any, any>'
When I look at the typings for Cell, I see the following definition: 
export type Renderer<Props> = ComponentType<Props> | ReactElement | ReactText | ReactFragment;
export type Renderer<Props> = ComponentType<Props> | ReactElement | ReactText | ReactFragment;
Where ReactText = string | number, so I'd expect that a string is still allowed. I know I can wrap my cell in an empty fragment, but feels like the wrong solution. Are there any other options? TIA!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?