Делаю галерею. На клик по фотографии открывается модальное окно с картинкой на весь экран. Хочется сделать возможность переключаться между фотографиями кнопками "Left" и "Right" через модальное окно, не пойму только пока как это осуществить.
Есть компонент галереи, который с помощью map рендерит array с фотографиями, данные о которых хранятся в отдельном файле. Вот часть компонента галереи:
<div className="inner-section">
<Fade bottom>
{
photos.map(item => <GalleryPhoto
key = {item.id}
imgSrc = {item.photo}
photoId = {item.id}
/>)
}
</Fade>
<ModalImage />
</div>
На всякий случай - вот как выглядит array с данными фотографий:
const photos = [{
photo: "./images/img1.jpg",
id: 1,
caption: "",
},
{
photo: "./images/img2.jpg",
id: 2,
caption: "",
}];
Так выглядит компонент отображаемой фотографии. В него из React Context передается функция для открытия модального окна и props с данными о месте расположения картинки и ее id. Эта функция просто задает состояние с modalOpen: false на true, а также в состояние imageSRC вставляет данные о локации фотографии.
export default class GalleryPhoto extends Component {
render() {
const {imgSrc, photoId} = this.props;
return (
<ProductConsumer>
{value => {
const {handleModal} = value;
return (
<div className="gallery-image">
<img onClick={() => handleModal(photoId, imgSrc)} src={imgSrc} alt="" />
</div>
)
}}
</ProductConsumer>
)
}
}
Так выглядит сама функция.
handleModal = (id, photo) => {
this.setState({
modalOpen: !this.state.modalOpen,
imageSRC: photo,
}, console.log(id, this.state.imageSRC))
}
Таким образом открывается модальное окно на клик по фотографии. Вот компонент окна:
export default class ModalImage extends Component {
render() {
return (
<ProductConsumer>
{value => {
const {modalOpen, imageSRC, handleModal} = value;
return (
<div className={"modal-container " + (modalOpen ? "visible" : '')}>
<button className="btn move-btn">Left</button>
<div className="modal-image-container">
<img src={imageSRC} alt=""/>
</div>
<button className="btn modal-close-btn" onClick={handleModal}>Close</button>
<button className="btn move-btn">Right</button>
</div>
)
}}
</ProductConsumer>
)
}
}
Теперь хочу, чтобы на кнопки Left и Right можно было переключаться между картинками, а не клацать постоянно по Close и открывать что-то другое. И чтобы смена ориентировалась на id, а не на названия фотографий , потому как не все названия фотографий соответствуют их id. Как это сделать?
Простой