1

Hi I wanted to implement this photo gallery from react-photo-gallery (https://www.npmjs.com/package/react-photo-gallery)

I've installed 2 dependencies: react-photo-gallery and react-images

I wanted to test the following link :https://codesandbox.io/s/awesome-bassi-5vn3lvz2n4?from-embed=&file=/index.js:666-689, but I've encountered a TypeError: Cannot read property 'active' of undefined when clicking in one of the image in my project. (https://ibb.co/9gdT9LD)

I tried to use the same exact code and I don't really understand why there is a TypeError.

Is there someone who can help me why there is an error and fix this error?

Here's my code that I've used to implement (same code as example in a different way)

import React, { useState, useCallback } from 'react';
import Gallery from 'react-photo-gallery';
import Carousel, { Modal, ModalGateway } from 'react-images';



const photos = [
  {
    src: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599',
    width: 4,
    height: 3,
  },
  {
    src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799',
    width: 1,
    height: 1,
  },
  {
    src: 'https://source.unsplash.com/qDkso9nvCg0/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/iecJiKe_RNg/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/epcsn8Ed8kY/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/NQSWvyVRIJk/800x599',
    width: 4,
    height: 3,
  },
  {
    src: 'https://source.unsplash.com/zh7GEuORbUw/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/PpOHJezOalU/800x599',
    width: 4,
    height: 3,
  },
  {
    src: 'https://source.unsplash.com/I1ASdgphUH4/800x599',
    width: 4,
    height: 3,
  },
];


const ImageGrid = (props) => {
  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);

  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };

  return (
    <div>
      <Gallery photos={photos} onClick={openLightbox} />
      <ModalGateway>
        {viewerIsOpen ? (
          <Modal onClose={closeLightbox}>
            <Carousel
              currentIndex={currentImage}
              views={(x) => ({
                ...x,
                srcset: x.srcSet,
                caption: x.title,
              })}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  );
}

export default ImageGrid;
SpicyyRiice
  • 111
  • 2
  • 14

2 Answers2

5

I also encountered this problem and changing the version of "react-images" to "1.0.0" fixed it for me.

Just run in terminal

npm install react-images@1.0.0

Make sure that your react dev server is not running when installing otherwise npm will fail with error.

meminger
  • 51
  • 1
1

I had to downgrade my React version to 16.8.6 to get it to work.

Dharman
  • 30,962
  • 25
  • 85
  • 135
kumakuma
  • 11
  • 1