Managing the Image in the Image Modal

Learn how to integrate XState with React to manage viewed images in a state machine. Implement actions for modal open/close events and a selector function to determine image liking in a React component.

We have ourselves a nice setup—we’re fetching images and feeding them to the app. Our app is rather static, though. We need a way to add new images to the liked images array. We would also like to check whether an image is liked so that we can display the proper icon in ImageDetailsModal.

Checking for liked images

If we want to know whether an image should be liked or unliked, we first need to know whether it’s liked. But even before we can know whether an image has been liked, we need to know all the data pertinent to that image. We will add a new item to the context of the likeImagesMachine machine: currentImage:

Get hands-on with 1200+ tech skills courses.