Dogs.jsx

import React, { useEffect, useState } from "react";
import styles from "./Dogs.module.css";

const Dogs = () => {
    const [breedsList, setBreedsList] = useState([]);
    const [selectedBreed, setSelectedBreed] = useState("husky");
    const [image, setImage] = useState("");
    const [saveImage, setSaveImage] = useState([]);
    const [randomList, setRandomList] = useState("");

    useEffect(() => {
        const getBreeds = async () => {
            try {
                const res = await fetch("https://dog.ceo/api/breeds/list/all");
                let data = await res.json();
                setBreedsList(Object.keys(data.message));
                getImage();
            } catch (error) {
                console.log("Error");
            }
        };
        getBreeds();
    }, []);

    const handlerBreedChange = (e) => {
        setSelectedBreed(e.target.value);
        if (e.target.value !== selectedBreed) {
            setSaveImage([]);
        }
    };

    const getRandom = () => {
        setSelectedBreed(
            breedsList[Math.floor(Math.random() * breedsList.length)]
        );
    };

    const getImage = async () => {
        try {
            const res = await fetch(
                `https://dog.ceo/api/breed/${selectedBreed}/images/random`
            );
            let data = await res.json();
            console.log(data);
            setImage(data.message);
            setSaveImage([...saveImage, data.message]);
        } catch (error) {
            console.log("Error");
        }
    };

    useEffect(() => {
        if (selectedBreed) {
            getImage();
        }
    }, [selectedBreed]);

    const saveResult = () => {
        const index = saveImage.indexOf(image);
        if (index > 0) {
            setImage(saveImage[index - 1]);
        }
    };

    return (
        <div className={styles.page}>
            <div className={styles.container}>
                <div className={styles.sidebar}>
                    <button className={styles.button} onClick={getRandom}>
                        Выбрать рандомно
                    </button>
                    <select
                        value={selectedBreed}
                        className={styles.select}
                        onChange={handlerBreedChange}
                    >
                        {breedsList.map((breed, i) => (
                            <option key={i} value={breed}>
                                {breed}
                            </option>
                        ))}
                    </select>
                </div>

                <div className={styles.content}>
                    {image.length > 0 && (
                        <div className={styles.imageWrapper}>
                            <img
                                className={styles.image}
                                src={image}
                                alt={selectedBreed}
                            />
                        </div>
                    )}
                    <div className={styles.buttonsGroup}>
                        {saveImage.length > 1 && (
                            <button
                                className={styles.button}
                                onClick={saveResult}
                            >
                                Назад
                            </button>
                        )}
                        <button className={styles.button} onClick={getImage}>
                            Показать другое
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Dogs;