React InfiniteScroll with Grid System

Question

What is up, guys? I have an array of objects, I have Grid container, I map through array and render Grid items. Everything is ok, except all Grid cards get rendered at the same time and I have a long list. So, I decided to add infiniteScroll component. But still all cards got rendered at the same time. Here's what I return outta my component:

<>
      {pokemonData ? (
        <>
          <InfiniteScroll
            dataLength={pokemonData.length}
            next={handleChangePage}
            hasMore={true}
            loader={<h4>Loading...</h4>}
            endMessage={
              <p style={{ textAlign: "center" }}>
                <b>Yay! You have seen it all</b>
              </p>
            }
          >
            <Grid container spacing={4} className={classes.pokemonCardsArea}>
              {pokemonData.map(
                (pokemon, index) =>
                  pokemon.name.includes(searchInputValue) && renderCards(index)
              )}
            </Grid>
          </InfiniteScroll>
        </>
      ) : (
        <CircularProgress
          color={"success"}
          className={classes.progress}
          size={200}
        />
      )}
</>

handleChangePage function just sets up page state to page + 1; And I've got no errors, just a full list rendered and Loading... at the bottom of it. I didn't find any information about what excactly "next" function should be. But one guy made it setPage function, so I did the same. Everything works for him (he renders pictures, one in a row), but not for me, I guess because of grid system. Did anybody ever succesfully implemented Infinite Scroll to the MUI grid system? I'm out of ideas, I can't fall asleep) Somebody help)

Answer 1

There's not that much information about InfiniteScroll + MUI grid system, but finally I'm able to make it work. I've left codesanbox sample for you here. Not that beautiful, but it will give an idea how to implement it.