An issue with the display of my code image has arisen. Interestingly, the Axios calls work effectively when I console them.
import { Container, Grid, Paper } from '@mui/material';
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import ButtonBase from '@mui/material/ButtonBase';
import axios from 'axios';
const Img = styled('img')({
margin: 'auto',
display: 'block',
maxWidth: '100%',
maxHeight: '100%',
});
const Home = () => {
const [albums, setAlbums] = useState([]);
useEffect(async () => {
const res = await axios.get(`https://jsonplaceholder.typicode.com/albums?userId=2`);
let tempArr = JSON.parse(JSON.stringify(res)).data;
let photos = [];
tempArr.forEach(async (element, index) => {
let res2 = await axios.get(`https://jsonplaceholder.typicode.com/albums/${element.id}/photos`);
photos = JSON.parse(JSON.stringify(res2)).data;
element.photos = photos;
tempArr[index] = element;
});
setAlbums(tempArr);
}, []);
return (
<div>
<Container sx={{ marginTop: '10px;' }}>
<Grid container spacing={2}>
{albums.map((item, key) => {
return (
<Grid key={key} item sm={6} xs={12}>
<Paper sm={{ textAlign: 'center' }} sx={{ p: 2, margin: 'auto', flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid item>
{(undefined !== item['photos'] && item['photos'].length) &&
<ButtonBase sx={{ width: 128, height: 128 }}>
<Img alt="complex" src={item['photos'][0]['thumbnailUrl']} />
</ButtonBase>
}
</Grid>
</Grid>
</Paper>
</Grid>
)
})}
</Grid>
</Container>
</div>
)
}
export default Home;
If someone could investigate this, it would be greatly appreciated. The array structure after setAlbums(tempArr); looks like this:
[
{
"userId": 2,
"id": 11,
"title": "quam nostrum impedit mollitia quod et dolor",
"photos": [
{
"albumId": 11,
"id": 501,
"title": "asperiores exercitationem voluptates qui amet quae necessitatibus facere",
"url": "https://via.placeholder.com/600/cda4c0",
"thumbnailUrl": "https://via.placeholder.com/150/cda4c0"
},
{
"albumId": 11,
"id": 502,
"title": "omnis qui sit et",
"url": "https://via.placeholder.com/600/74e371",
"thumbnailUrl": "https://via.placeholder.com/150/74e371"
},
{
"albumId": 11,
"id": 503,
"title": "modi voluptas fugiat eos",
"url": "https://via.placeholder.com/600/9022fb",
"thumbnailUrl": "https://via.placeholder.com/150/9022fb"
},
]
}
]
However, attempting to loop through
<p>{item['photos'][0]['thumbnailUrl']}</p>TypeError: Cannot read properties of undefined (reading '0')