I am using axios to call an api to retreive pictures when a button is hit. The problem I am having is I get errors when I use photos.forEach saying forEach is not a function. Currently using the for loop it only displays the first result. When I console.log the array is full of the photos I'm just having difficulty accessing them! Im sure this is simple, I am currently learning js and react and need some guidance. Thanks!
function Facebook() {
const [photos, setPhotos] = useState('');
const getData = () => {
axios
.request(options)
.then(function (response) {
const data = response.data.photos.data;
setPhotos(
data.map((image) => {
return image.picture;
}),
);
})
.catch(function (error) {
console.error(error);
});
};
//console.log(photos.length);
//console.table(photos);
const photoList = () => {
for (let i = 0; i < photos.length; i++) {
console.table(photos);
return <img className='img image-full' src={photos[i]} />;
}
};
return (
<div>
<button
onClick={getData}
className='inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600'>
Tailwind Button
</button>
<div className='flex flex-row mx-auto'>
<ul>
<li>{photoList()}</li>
</ul>
</div>
</div>
);
}
export default Facebook;You can either initialize photos with an empty array, or just leave it undefined and check if it is set when you access it later. I would rather just use an empty array though:
function Facebook() {
const [photos, setPhotos] = useState([]);
...
Btw, you can also use map for getting the photos in JSX and omit the photoList function, but that is just a matter of opinion:
return (
<div>
<button
onClick={getData}
className='inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600'>
Tailwind Button
</button>
<div className='flex flex-row mx-auto'>
<ul>
<li>
{photos.map((elem) => {
return <img className='img image-full' src={elem} />;
})}
</li>
</ul>
</div>
</div>
);