search

ankeetmaini / react-infinite-scroll-component

An awesome Infinite Scroll component in react.
https://react-infinite-scroll-component.netlify.com/
MIT License
2.89k stars 322 forks source link

`scrollableTarget` throws error `Type 'HTMLElement' is not assignable to type 'ReactNode'` in React 18 #378

Open na2793 opened 1 year ago

na2793 commented 1 year ago

https://codesandbox.io/s/young-frost-ujmz14?file=/src/index.tsx

I recently upgraded my project to React 18, then the following error started to occur :

image

With React 17, there was no problem at all.

I think HTMLElement has changed to no longer be part of ReactNode.

I knew it was possible to pass id value in form of a string to scrollableTarget, but I couldn't because the node I was trying to pass it to didn't have id.

What's the best way to handle this?

na2793 commented 1 year ago

image

The type of scrollableTarget does not have to be ReactNode, it needs to be HTMLElement.

The value of scrollableTarget is usually a DOM element obtained using useRef(), but useRef() cannot provide a ReactNode other than HTMLElement.

bauerbach commented 1 year ago

This library seems to have been abandoned unfortunately. :(

ashwary23 commented 10 months ago

I upgraded from react 17 to react 18 and following issue started

'InfiniteScroll' cannot be used as a JSX component.
  Its instance type 'InfiniteScroll' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'Element' is not assignable to type 'ReactNode'.