Решение задания

Space of React

Решение заданияУпражнение: Галерея изображений — Cоздание React компонентов | Max Roslow | Space of React


const [selectedIndex, setSelectedIndex] = useState(null);


const goToNext = () => {
    if (selectedIndex < images.length - 1) {
        setSelectedIndex(selectedIndex + 1);
    }
};


useEffect(() => {
    const handleKeyPress = (e) => {
        if (e.key === 'Escape') closeModal();
        if (e.key === 'ArrowRight') goToNext();
    };
    
    window.addEventListener('keydown', handleKeyPress);
    
    return () => window.removeEventListener('keydown', handleKeyPress);
}, [selectedIndex]);


function ImageGallery() {
    //...
    
    const openModal = (index) => {
        //...
    };
    
    const closeModal = () => {
        //...
    };
    
    useEffect(() => {
        //...
        
        const handleKeyPress = (e) => {
            //...
        };
        
        window.addEventListener('keydown', handleKeyPress);
        return () => window.removeEventListener('keydown', handleKeyPress);
    }, [selectedImageIndex]);
    
    return (
        <div className="gallery-container">
            <div className="gallery-grid">
                {IMAGES.map((image, index) => (
                    <div key={image.id} onClick={() => openModal(index)}>
                        {/*...*/}
                    </div>
                ))}
            </div>
            
            {selectedImageIndex !== null && (
                <div className="modal-overlay" onClick={closeModal}>
                    <div onClick={(e) => e.stopPropagation()}>
                        {/*...*/}
                    </div>
                </div>
            )}
        </div>
    );
}

Войдите, чтобы решать задание

Галерея с модальным окном

Задание