CODEWITHSUNDEEP
node.jsreactjsmaterial-ui
aluuusch
aluuusch

Reputation: 81

Display fetched API data in material-UI cards

Ive been trying for quite a time to do the following:

By using hooks (useState and useEffets), fetch an API, take three properties of the objects (5000) and place each of them in a material-UI card.

The first two steps work fine (please see picture)

enter image description here

However, I dont know how to use the map.function in a way that the fetched data is placed inside the cards. I assume the map-function needs to go inside the return statement in App.js where the m-UI objects are. Still, I couldn find out how.

enter image description here

Thank you very much for any advice.

Upvotes: 1

Views: 1411

Answers (2)

LoveLace Midnight
LoveLace Midnight

Reputation: 21

i'd recomend you to create a file for MediaCard component(let's say MediaCard.js), then in your app.js file use the same logic that you used at DataFectching.js to fetch the data then insted of rendering every photo in a

<li>

use:

photos.map((photo, index)=> <MediaCard />)

dont forget the props.

Upvotes: 1

Junior Yono
Junior Yono

Reputation: 516

To map an array in React, you would do:

return (
   <div>
      {photos.map((value, index) => {
         // value is equal to the object at that specific index
         return <MediaCard props={value} />;
      })}
   </div>
);

Upvotes: 2

Related Questions