Continuing from: Implementing a lightbox feature in react-multi-carousel for my ReactJS app
My application utilizes react-images for the lightbox functionality and react-carousel-images for the carousel. The API provides a title and image data. The issue I am encountering is that the title shown in the footer caption always reflects the selected image and does not update when navigating through the carousel in the lightbox mode. I suspect this may be related to the index of the selected image. Below is a link showcasing the problem:
slider.js
import React, { Component } from "react";
// import "../slider/slider.css";
import "./slider.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import LightBox, { Modal, ModalGateway } from "react-images";
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 1
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 1
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 1
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1
}
};
class Slider extends Component {
_isMounted = false;
state = {
awsApiData: [],
loading: false,
//selectedIndex: 0,
selectedImage: {},
lightboxIsOpen: false
};
componentDidMount() {
this._isMounted = true;
console.log("App mounted");
this.setState({ loading: true });
fetch("https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/livestage/imgApi")
.then(data => data.json())
.then(data =>
this.setState({
awsApiData: data.map(item => ({
...item,
source: item.image
})),
loading: false
})
);
}
componentWillUnmount() {
this._isMounted = false;
}
toggleLightbox = (post, selectedIndex) => {
this.setState(state => ({
lightboxIsOpen: !state.lightboxIsOpen,
selectedImage: { title: post.title, index: selectedIndex }
}));
};
render() {
return (
<div>
{this.state.loading ? (
<div className="text-center">Loading...</div>
) : (
<div>
<Carousel
additionalTransfrom={0}
showDots={false}
arrows={true}
autoPlaySpeed={3000}
autoPlay={true}
centerMode={false}
className="slider"
containerClass="container-with-dots"
dotListClass="dots"
draggable
focusOnSelect={false}
infinite
itemClass="carousel-top"
keyBoardControl
minimumTouchDrag={80}
renderButtonGroupOutside={false}
renderDotsOutside
responsive={responsive}
>
{Object.values(this.state.awsApiData).map((post, indx) => {
return (
<div
className="mt-5"
key={indx}
onClick={() => this.toggleLightbox(post, indx)}
>
<img
className="media-img card-img-top card-img-hero"
src={post.source}
alt="Alt text"
style={{ cursor: "pointer" }}
/>
</div>
);
})}
</Carousel>
<ModalGateway>
{this.state.lightboxIsOpen ? (
<Modal onClose={this.toggleLightbox}>
<LightBox
components={{
FooterCaption: () => <div>{this.state.selectedImage.title}</div>
}}
currentIndex={this.state.selectedImage.index}
frameProps={{ autoSize: "height" }}
views={this.state.awsApiData}
/>
</Modal>
) : null}
</ModalGateway>
</div>
)}
</div>
);
}
}
export default Slider;