Display fetched API data in material-UI cards

Question

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)

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.

Thank you very much for any advice.

Answer 1

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.