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;

Console.log for photosArray

CodePudding user response：

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>
);