Categories

See More
Popular Forum

MBA (4887) B.Tech (1769) Engineering (1486) Class 12 (1030) Study Abroad (1004) Computer Science and Engineering (988) Business Management Studies (865) BBA (846) Diploma (746) CAT (651) B.Com (648) B.Sc (643) JEE Mains (618) Mechanical Engineering (574) Exam (525) India (462) Career (452) All Time Q&A (439) Mass Communication (427) BCA (417) Science (384) Computers & IT (Non-Engg) (383) Medicine & Health Sciences (381) Hotel Management (373) Civil Engineering (353) MCA (349) Tuteehub Top Questions (348) Distance (340) Colleges in India (334)
See More

Lazy load and object array instead of a component?

General Tech Bugs & Fixes

Max. 2000 characters
Replies

usr_profile.png

User

( 6 months 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.

what's your interest


forum_ban8_5d8c5fd7cf6f7.gif