{"id":47,"date":"2025-07-01T14:26:03","date_gmt":"2025-07-01T18:26:03","guid":{"rendered":"https:\/\/www.shawntgray.com\/blog\/?p=47"},"modified":"2025-07-01T14:26:59","modified_gmt":"2025-07-01T18:26:59","slug":"how-to-build-an-art-gallery-with-react-part-5-add-cool-features","status":"publish","type":"post","link":"https:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-5-add-cool-features\/","title":{"rendered":"How to Build an Art Gallery with React \u2013 Part 5: Add Cool Features"},"content":{"rendered":"\n
We’re almost there! In this part, we’ll cover 2 topics:<\/p>\n\n\n\n
\n
Add more functionality to your App <\/strong>and ImageCard <\/strong>components that will allow you to view images in a full-screen Popover <\/em><\/strong>modal.<\/li>\n\n\n\n
Add a shuffle <\/em><\/strong>feature that randomizes your images each time you load your app.<\/li>\n<\/ol>\n\n\n\n
Let’s See Those Big Images<\/h2>\n\n\n\n<\/figure>\n\n\n\n
Click an image. A popover <\/em><\/strong>modal appears, displaying the full-size image, its title, and a close button, while darkening the background to give it the spotlight.<\/p>\n\n\n\n
To do this, we’ll first modify the App <\/strong>component.<\/p>\n\n\n\n
Added a new useState <\/em><\/strong>with an initial value of null for the selected image.<\/li>\n\n\n\n
Defined the two states of the popover using openPopover <\/em><\/strong>and closePopover<\/em><\/strong>.\n
\n
openPopover<\/em><\/strong> sets the selected image to whatever image the user clicked<\/li>\n\n\n\n
closePopover <\/em><\/strong>resets the selected image to null, removing any chance the app will become confused by what image is actually selected.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Inside the App <\/strong>component function, we updated the <ImageGallery><\/strong> element to pass along the onImageClick <\/em><\/strong>action. This action will then be sent down to the ImageCard <\/strong>component – the level where the event will actually be triggered by the user’s click action.<\/li>\n\n\n\n
Finally, when an image is clicked and the openPopover <\/em><\/strong>function is triggered, we build a new Popover that contains the full-size image, its title, and a close button.\n
\n
If the user clicks the close button OR clicks outside the Popover window, the closePopover <\/em><\/strong>function will be triggered and the Popover will disappear and the selectedImage <\/em><\/strong>variable will be reset to null.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Let’s quickly update the ImageGallery <\/strong>component to allow it to pass along the onImageClick <\/em><\/strong>action to the ImageCard <\/strong>component.<\/p>\n\n\n\n
ImageGallery<\/strong> now accepts the onImageClick <\/em><\/strong>parameter and simply passes it along to the <ImageCard><\/strong> element.<\/p>\n\n\n\n
Next, let’s update the ImageCard <\/strong>component to trigger the openPopover <\/strong><\/em>function when it is clicked.<\/p>\n\n\n\n
This component now accepts the onImageClick <\/em><\/strong>parameter and triggers the function when the image is clicked, passing the matching image <\/strong><\/em>data back up to the App <\/strong>component.<\/p>\n\n\n\n
Finally, let’s style the new Popover <\/em><\/strong>in our App.css<\/strong> file.<\/p>\n\n\n\n
For a bit of fun randomness, let’s add a shuffle function to keep the app interesting on repeat visits. This bit is only added to the App <\/strong>component and, honestly, is completely optional. But, it is a good way to get introduced to React’s useEffect <\/em><\/strong>method.<\/p>\n\n\n\n
App.js<\/strong><\/p>\n\n\n\n
import { useEffect, useState } from 'react';\n\/\/ Other imports\n\nconst shuffleArray = (array) => {\n const shuffledArray = [...array];\n for (let i = shuffledArray.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];\n }\n return shuffledArray;\n}\n\nfunction App() {\n \/\/ Previously defined filters, images, selectedImage\n \n useEffect(() =>{\n const shuffledData = shuffleArray(data);\n setImages(shuffledData);\n }, []);\n\n \/\/ Previously defined toggleFilter, uniqueCategories,\n \/\/ filteredImages, openPopover, and closePopover\n\n return ( ... );\n}\nexport default App;<\/code><\/pre>\n\n\n\n
What changed?<\/p>\n\n\n\n
\n
We added a general function named shuffleArray <\/em><\/strong>that takes in an array of stuff, shuffles it using a randomizing for <\/em><\/strong>loop\n
\n
This loop contains a Math.random()<\/em><\/strong> method that takes the current placement of an array item and assigns it to a different, randomly chosen placement that hasn’t already been occupied.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
We then removed const images = data<\/em><\/strong> and are now redefining the images <\/em><\/strong>variable through the shuffleArray <\/em><\/strong>function.<\/li>\n\n\n\n
Nothing else needs to change in the other variables, functions, or the returned HTML.<\/li>\n<\/ul>\n\n\n\n
That’s all there is to the shuffle functionality! Now, the more images you add to your gallery, the more unique each subsequent visit will be!<\/p>\n\n\n\n
In the next part, we’ll wrap up this project by reviewing what we’ve built and prepare the project to launch in a live environment.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to add functionality to view images in full-screen popup windows. Also, add a shuffle function for some extra fun flair.<\/p>\n","protected":false},"author":1,"featured_media":34,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-gallery"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":2,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions\/68"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/media\/34"}],"wp:attachment":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Popover\"](\"https:\/\/www.shawntgray.com\/blog\/wp-content\/uploads\/2025\/06\/popover.png\")
<\/figure>\n\n\n\n