Creating the Modal Component

The task for this lesson is to create a pop-up modal when an image is clicked. A modal will display over the rest of the content on the page. This will show the user the larger version of the selected image, and we can also add additional image data, such as the image author. This modal will also link to a full-page view of the image, and we can also close it to select a new image.

Required steps

Follow the below steps:

1. Create a new modal component and pass to it the selected image.

2. Toggle the modal visibility (open/close).

3. Create a link to a new page to view additional image data.

Storing the selected image

To begin, inside the useState.js file, we can create a new constant to store the selected image: