Advanced Gutenberg Course, React Images Upgrade

[Hans-Peter Hioolen]

Hi!
I’m retaking the course AGC to start with Gutenberg development again. Doing this, I was following the steps in getting the gallery (frontend react) working again.
Since then the Lightbox has been upgraded and the sandbox code is upgraded. https://reactjs.org/docs/error-decoder.html/?invariant=321

I twitched their new code already a bit, but I can’t get it to work.
I’m getting this error which prob. means I implemented React in the wrong fashion. Could you please help me to see where I’m going wrong with this?
Thanks in advance.

This is what I have up to now:

components/FrontendGallery.js

import Gallery from “react-photo-gallery”;
// import Lightbox from “react-images”;
import Carousel, { Modal, ModalGateway } from “react-images”;

const {
element: {
useState,
useCallback,
},
} = wp;

const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);

export default class FrontendGallery extends React.Component {
state = {
currentImage: 0
};

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

closeLightbox = () => {
setcurrentImage(0);
setViewerIsOpen(false);
};
render() {
return (
<div>
<Gallery
photos={this.props.photos}
direction={this.props.direction}
onClick={this.openLightbox}
/>
{this.props.islightboxenabled == “true” && (

<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={this.props.photos.map(x => ({
…x,
srcset: x.srcSet,
caption: x.title
}))}
/>
</Modal>
) : null}
</ModalGateway>
)}
</div>
);
}
}

[Author]

Posts