React Current Image in Image Gallery - reactjs

Question

Hello i have a litle problem with react-image-gallery.
In ImageGallery component i pass startIndex value like this.state.currentImage and this.state.currentImage depends on number photo with we are going to click.
When we click on photo for example number 4 this.state.currentImage is chaining on number 4 and its correct for me but in <imageGallery/> component startIndex doesn't work like i should. My modal always start on first image index[0].
import React, { Component } from "react";
import { Modal, ModalClose, ModalBody } from "react-modal-bootstrap";
import ImageGallery from "react-image-gallery";
import "./index.css";
export default class Images extends Component {
constructor(props) {
super(props);
var data = { title: "photos", images: [], ...props.data };
this.state = {
open: false,
showPlayButton: true,
showGalleryPlayButton: false,
showFullscreenButton: true,
showGalleryFullscreenButton: false,
currentImage: 0,
test: 0,
player: [],
data: data
};
console.log("Images: ", this.state.data);
this.openLightbox = this.openLightbox.bind(this);
this._renderImages = this._renderImages.bind(this);
this._onSlide = this._onSlide.bind(this);
this._onReady = this._onReady.bind(this);
}
state = {
isOpen: false
};
openModal = event => {
console.log(event.target);
this.setState({ isOpen: true });
};
openLightbox(index, event) {
// console.log('index',index);
event.preventDefault();
// this.setState({
// isOpen: true,
// currentImage: index
// });
this.setState(
prevState => {
return {
currentImage: index,
isOpen: true
};
},
() => {
console.log("currentImage", this.state.currentImage);
console.log("event", index);
}
);
}
hideModal = () => {
this.setState({ isOpen: false });
};
_renderImages(item) {
return (
<div className="images image-gallery-image">
<div className="images image-wrapper">
<h1>{this.state.currentImage}</h1>
<img src={item.img} alt="" className="images multimedia_image" />
<span className="images image-gallery-description">{item.desc}</span>
</div>
</div>
);
}
_onReady(event) {
const player = this.state.player;
player.push(event.target);
this.setState({
player: player
});
}
_onSlide() {
this.state.data.images.forEach(player => {});
}
handleImageLoad(event) {
console.log("Image loaded ", event.target);
}
render() {
var openLightbox = this.openLightbox;
var currentImage = this.state.currentImage;
const number = this.state.currentImage;
return (
<div className="images row">
<div className="images col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="images title">{this.state.data.title}</div>
</div>
<div className="images col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="images row">
{this.state.data.images.map((object, i) => {
let backgroundImage = {
backgroundImage: "url(" + object.thumbnail + ")",
top: 0,
right: 0,
left: 0,
bottom: 0,
position: "absolute",
flex: 1,
backgroundPosition: "center",
backgroundSize: "cover",
zIndex: 1
};
return (
<div
className="images item col-xs-4 col-sm-4 col-md-3 col-lg-3 images__single-item"
key={i}
>
<div
className="images multimedia_button"
onClick={e => this.openLightbox(i, e)}
>
<div style={backgroundImage} />
</div>
</div>
);
})}
</div>
</div>
<Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
<button
type="button"
className="images player_button_close"
onClick={this.hideModal}
>
X
</button>
<ModalBody>
<ImageGallery
items={this.state.data.images}
startIndex={this.state.currentImage}
slideInterval={2000}
showPlayButton={false}
showFullscreenButton={false}
onImageLoad={this.handleImageLoad}
onSlide={this._onSlide}
showIndex={true}
renderItem={this._renderImages}
/>
</ModalBody>
</Modal>
</div>
);
}
}

Answer 1

I found a solution when I needed to reinitialize current element. It can be useful for some other dev.
The answer is A “key” a special string attribute when we create lists of elements.
Whenever "key" is going change element is rerender. So
this.state = {
open: false,
showPlayButton: true,
showGalleryPlayButton: false,
showFullscreenButton: true,
showGalleryFullscreenButton: false,
currentImage: 0,
test: 0,
player: [],
data: data,
number:0
};
openLightbox(index, event) {
event.preventDefault();
this.setState(
prevState => {
return {
currentImage: index,
isOpen: true,
number:prevState.number+1
};
},
() => {
console.log("currentImage", this.state.currentImage);
console.log("event", index);
}
);
And here we neet to add our key={this.state.number}
<Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
<button
type="button"
className="images player_button_close"
onClick={this.hideModal}
>
X
</button>
<ModalBody>
<ImageGallery
key={this.state.number}
items={this.state.data.images}
startIndex={this.state.currentImage}
slideInterval={2000}
showPlayButton={false}
showFullscreenButton={false}
onImageLoad={this.handleImageLoad}
onSlide={this._onSlide}
showIndex={true}
renderItem={this._renderImages}
/>
</ModalBody>
</Modal>