I am struggling to extract the ImgString from an array retrieved from an API and assign it to the base64 property of a photo object, but I keep encountering an error. As someone new to react, typescript, and javascript, I'm unsure where my code is going wrong.
import { useState, useEffect } from "react";
export function getImages() {
const [photos, setPhotos] = useState<Photo[]>([]);
const GetPhotoURL = "***"
useEffect(() => {
const loadSaved = async () => {
const data = await axios.get(GetPhotoURL)
.then(res => {
const photos = [] as Photo[];
for (let i = 0; i <= res.data.length; i++) {
var photo: Photo = {};
photo.base64 = `data:image/jpeg;base64,${res.data[i].ImgString}`;
photos.push(photo);
}
setPhotos(photos);
})
};
loadSaved();
}, []);
return {
photos,
};
}
export interface Photo {
base64?: string;
}