'AutoSizer' cannot be used as a JSX component.
IbrahimIjai opened this issue · comments
How can I fix this error please??
"'AutoSizer' cannot be used as a JSX component.
Its instance type 'AutoSizer' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.ts(2786"
It seems to be a minor issue but I cant get my head around it
Here is my component
'use client'
import React, { CSSProperties, FC, ReactElement, useCallback } from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList } from 'react-window'
type RowCallback = (row: { index: number; style: CSSProperties }) => ReactElement
export interface ListProps {
className?: string
rowHeight?: number
rowRenderer: FC
rowData: TData[]
}
export type ListComponent = (props: ListProps) => React.ReactElement | null
export function List({ className, rowHeight, rowData, rowRenderer: RowComponent }: ListProps) {
const Row = useCallback<RowCallback>(
({ index, style }) => {
return <RowComponent style={style} {...rowData[index]} />
},
[RowComponent, rowData]
)
return (
{({ height }: { height: number }) => (
<FixedSizeList
width="100%"
height={height}
itemCount={rowData.length}
itemSize={rowHeight || 48}
className={className}
style={{ overflow: 'overlay' }}
>
{Row}
)}
)
}
