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)