React-images gallery

I am trying to build an image gallery with React-images(https://github.com/jossmac/react-images).

Here is my code so far.

https://codesandbox.io/s/gallant-yalow-7srs6

Here I am trying to achieve two things:

1. Implement the modal and the modal will open with current select image from the base gallery.
2. Change the "of" inside active view of total view on footer. i.e. currently its "1 of 4" so I need this like "1 / 4"

Could anyone please help me? I am kind of lost :(

Thanks in advance.

So I was able to achieve your requirement, Working example : https://codesandbox.io/s/xenodochial-dawn-scjsv

And here is the code:

 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;