Чтобы я смог выполнить ваше требование, Рабочий пример : https://codesandbox.io/s/xenodochial-dawn-scjsv
А вот код:
class gall extends React.Component {
state = { modalIsOpen: false, currentIndex: 0 };
toggleModal = () => {
this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
};
onImageChange = (index) => {
console.log(index)
this.setState(state => ({ currentIndex: index }));
};
render() {
const { modalIsOpen } = this.state;
const CustomModalFooter = ({ currentIndex, views }) => {
const activeView = currentIndex + 1;
const totalViews = views.length;
if (!activeView || !totalViews) return null;
return (
<span class="react-images__footer__count css-w6xjhe css-1ycyyax">
{activeView} / {totalViews}
</span>
);
};
return (
<>
<button
type="button"
className="btn-fullScreen"
onClick={this.toggleModal}
>
Open Modal
</button>
<ModalGateway>
{modalIsOpen ? (
<Modal onClose={this.toggleModal}>
<Carousel
currentIndex={this.state.currentIndex}
components={{ FooterCount: CustomModalFooter }}
views={images}
/>
</Modal>
) : null}
</ModalGateway>
<Carousel
onClick={this.onImageClick}
trackProps={{onViewChange:(index) => this.onImageChange(index)}}
components={{ FooterCount: CustomModalFooter }}
views={images}
/>
</>
);
}
}
export default gall;