Lazy load and object array instead of a component?

manpreet Best Answer 2 years ago

i am doing a reactjs app with material-ui and i have seen many examples of reacjs lazy loading components.. but i have an array of GridListTile objects from material-ui that i load into a Gridlist component, this GridListTile array is the result of an array.map() im calling..

i already tried putting the Suspense in the GridList and in the array.map() i return every GridListTile inside a lazy() call but obviously its not working as it expects a component etc...

this is my GridList:

           <Paper style={{ margin: 25, padding: 25 }}>
            <GridList
              spacing={10}
              cols={5}
              cellHeight="auto"
            >
              <Suspense fallback={<div>Loading...<div>}
              {this.state.collectionList}
              Suspense>
            GridList>
          Paper>

and this is my array.map() where i return the content of this.state.collectionList

            const tempCollectionList = res.data.map(item => {
            return (
              lazy.(() = (
              <GridListTile key={item._id}>
                  <img
                    src={item.pathToImage}
                    alt={item.title}
                  />
              GridListTile>
            ));
          });
          this.setState({
            collectionList: tempCollectionList
          });

but i just get errors, a lot, something like those not being react components and a lot of other error.. point is it does not load, for obvious reasons, lazy loading is for components only

but how can i achieve lazy loading for an array of objects?? i have more than 100 tiles in this.state.collectionList.