'AutoSizer' cannot be used as a JSX component.

[IbrahimIjai]

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}

)}

)
}

[bvaughn]

Change published in react-virtualized-auto-sizer@1.0.21

---

❤️ → ☕ givebrian.coffee