2

I have used react-window to render large list on UI. Not sure why it's calling the RenderRow function infinitely when I scroll and it's not able to render the pending rows when I am scrolling (showing me blank screen).

Can anyone please tell me, what I am doing wrong?

Thank you :)

Kelly
  • 131
  • 7

1 Answers1

1

There's a small thing that was missing, which is the style that must be send to Row so the code of the RenderRow will be :

const RenderRow = ({ index, style }) => {
    const item = combinedData[index];

    return item.isServiceParent ? (
      <div style={style} className="service-parent-name">
        <p>{item.title}</p>
      </div>
    ) : (
      <div style={style} className="service">
        <p>{item.name}</p>
      </div>
    );
  };
Mohamed Ashraf
  • 74
  • 5
  • Hey Mohamed, Can you please help with one more thing? https://stackoverflow.com/questions/74204264/react-sortable-or-jquery-ui-like-sortable-on-react-window-list – Kelly Oct 26 '22 at 07:44
  • Hey Kelly, I have take a look at it, and you have to use `react-window-sortable` instead of `react-window` not with it, I saw an expamle but it was using class components https://github.com/ntbosscher/react-window-sortable/blob/HEAD/example-fixed-sized-list.tsx – Mohamed Ashraf Oct 26 '22 at 08:37
  • I tried, but react-window-sortable is not working. Can you please share any code sandbox with me where it's working? – Kelly Oct 26 '22 at 14:11
  • class component will also work. but can you please share any live example which is working – Kelly Oct 26 '22 at 14:11
  • Apologizes for late, but I was and still very busy, if it didn't work yet you can add a post so people can help – Mohamed Ashraf Nov 01 '22 at 06:16