I am trying to use FsLightbox in my gallery app it is almost working but I cannot figure out how to open image on which I just clicked. It always opens the first one or if I slide to another the FsLightbox remembers the last closed.
Is there any way how to overwrite it, so it opens image I want based of ID.
const Gallery = () => {
const url = 'http://127.0.0.1:8000/api/gallery/';
const [imageUrl, setImageUrl] = useState([]);
const [data, setData] = useState([]);
const [toggler, setToggler] = useState(false);
const [productIndex, setProductIndex] = useState(0);
useEffect(() => {
const fetchData = async () => {
const result = await axios(url,);
setData(result.data)
result.data.forEach(item => {
imageUrl.push(item.image)
})
}
fetchData();
}, [])
return (
<div>
{data.map((item =>
<div key={item.id} onClick={() => setProductIndex(item.id)}>
<img src={item.image} onClick={() => {setToggler(!toggler)}} />
</div>
))}
<FsLightbox toggler={toggler} sources={imageUrl} key={productIndex} />
</div>
)
}