{"id":45,"date":"2025-07-01T14:26:02","date_gmt":"2025-07-01T18:26:02","guid":{"rendered":"https:\/\/www.shawntgray.com\/blog\/?p=45"},"modified":"2025-07-01T14:26:32","modified_gmt":"2025-07-01T18:26:32","slug":"how-to-build-an-art-gallery-with-react-part-4-filter-images","status":"publish","type":"post","link":"https:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-4-filter-images\/","title":{"rendered":"How to Build an Art Gallery with React \u2013 Part 4: Filter Images"},"content":{"rendered":"\n
We’re half way there! In this part, we will:<\/p>\n\n\n\n
\n
Use the data from images.json<\/strong> to build a full list of category tag buttons.<\/li>\n\n\n\n
Add tag buttons to the ImageCard<\/strong> components.<\/li>\n\n\n\n
Add functionality to the buttons that will filter the images by only displaying those images that include the selected category tags<\/li>\n<\/ul>\n\n\n\n
Add the Full List of Filter Buttons to App.js<\/h2>\n\n\n\n<\/figure>\n\n\n\n
Open your App.js<\/strong> file and update its content to:<\/p>\n\n\n\n
We set our data <\/em><\/strong>to the images<\/em><\/strong> variable as the images\/image combo is a lot easier to understand at a glance than data\/datum.<\/li>\n\n\n\n
To gather all unique category tags from the images.json<\/strong> data, we create a new Set <\/em>where we cycle through each image, gather all category <\/em><\/strong>tags, and add all unique tags to the uniqueCategories <\/em><\/strong>array ignoring any repeated tag.<\/li>\n\n\n\n
The uniqueCategories<\/em><\/strong> is alphabetized (A\u2192Z) for improved readability. If we didn’t use .sort()<\/em><\/strong>, the tags would be listed in a first-found order\u2014fairly confusing on the user’s end.<\/li>\n\n\n\n
We then create a new categories <\/em><\/strong>container in our App <\/em><\/strong>container where we map out each category <\/em><\/strong>as its own button.<\/li>\n<\/ul>\n\n\n\n
For now, the buttons don’t actually do anything. We’ll add the filter functionality later in this Part.<\/p>\n\n\n\n
Next, we’ll add the category tags to the individual ImageCard <\/strong>components in ImageCard.js. This won’t change your ImageGallery <\/strong>component as it already accepts your images and passes along each image’s information through the ImageCard <\/strong>element’s image attribute.<\/p>\n\n\n\n
Open your ImageCard.js<\/strong> file and update it to build the category <\/em><\/strong>tag buttons for each image.<\/p>\n\n\n\n<\/figure>\n\n\n\n
We created a categories<\/em> <\/strong>container within the image-card<\/em><\/strong> container. Note that this shares the same class name as the container you created in your App <\/strong>component. This way, all category <\/em><\/strong>tag buttons will be styled the same, signaling to the user that these buttons all serve the same purpose.<\/li>\n\n\n\n
We then set up a ternary statement<\/strong> (helpful shorthand for if\/else statements). If we have any categories listed for this image, build the buttons. Otherwise, display the message “Add a category”. The pattern for a ternary statement<\/strong> is:<\/li>\n<\/ul>\n\n\n\n
condition<\/em>\n ? Do this if condition is true<\/em>\n : Do this if condition is false<\/em>;<\/code><\/pre>\n\n\n\n
\n
Here the category <\/em><\/strong>tag buttons are <span><\/strong> elements, but they will function and be styled the same as the <button><\/strong> elements in your App <\/strong>component.<\/li>\n<\/ul>\n\n\n\n
Now we’ll add the necessary styles for the categories <\/em><\/strong>and category-pill<\/em><\/strong> classes to App.css<\/strong>:<\/p>\n\n\n\n
Now that all the buttons are in place, let’s make them actually filter your list of images. To do this, we’ll utilize React’s built-in useState <\/strong>functionality to track and, well, react <\/em>to your changes.<\/p>\n\n\n\n
A useState <\/strong>statement takes in a variable and through some function, updates that variable, setting it to a new piece of data that reflects your changes.<\/p>\n\n\n\n
Remember that events bubble from the bottom up. Events update properties that are then fed from the top down. Knowing this, let’s add the filter functionality to the App <\/strong>component.<\/p>\n\n\n\n
What is happening with these changes?<\/p>\n\n\n\n
\n
Import the useState <\/em><\/strong>method from the React library.<\/li>\n\n\n\n
Instantiate useState <\/em><\/strong>methods as empty arrays for both filters <\/em><\/strong>and images<\/em><\/strong>.<\/li>\n\n\n\n
Build a toggleFilter <\/strong>function that takes in a category parameter and checks if the category <\/em><\/strong>already appears in the filters <\/em><\/strong>array. If so, remove it from the filters <\/em><\/strong>array. Otherwise, add the chosen category <\/em><\/strong>to the filters <\/em><\/strong>array.<\/li>\n\n\n\n
Build a filteredImages <\/strong>function that takes takes in the array of filters<\/em><\/strong>. If the array is empty, display all images. Otherwise, only display those images that have the categories that appear inside the filters <\/em><\/strong>array within their categories list (as shown in your images.json<\/strong> file).<\/li>\n\n\n\n
Update the <button><\/strong> element built in the uniqueCategories.map()<\/em><\/strong> function by adding an onClick <\/em><\/strong>event that triggers the toggleFilter() <\/em><\/strong>function and pass it’s corresponding category to that function.<\/li>\n\n\n\n
Update the <ImageGallery><\/strong> element so that it:\n
\n
Only displays images returned by the filterImages <\/em><\/strong>function.<\/li>\n\n\n\n
Passes along the toggleFilter <\/em><\/strong>function so that the ImageCard <\/strong>can inherit and use the function. Otherwise, toggleFilter <\/em><\/strong>will have to be redefined in the ImageCard <\/strong>component, which would cause a whole host of timing issues and variable\/event collisions that would outright destroy your app.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Next, update the ImageGallery <\/strong>component so it can successfully inherit and pass along the new toggleFilter <\/em><\/strong>function.<\/p>\n\n\n\n
Since the ImageGallery <\/strong>component basically serves simply as a throughline that connects the individual ImageCard <\/strong>components with the larger App <\/strong>component, the changes we made are simple:<\/p>\n\n\n\n
\n
toggleFilter <\/em><\/strong>was added to the list of parameters ImageGallery <\/strong>can accept.<\/li>\n\n\n\n
The <ImageCard><\/strong> element now has a new toggleFilter <\/strong>attribute set to toggleFilter<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
Now, update the ImageCard <\/strong>component so it can properly inherit toggleFilter <\/em><\/strong>and use the function for its own group of filter buttons.<\/p>\n\n\n\n
All the heavy lifting is done within your App <\/strong>component. Here, we made two changes:<\/p>\n\n\n\n
\n
ImageCard <\/strong>contains a new parameter to properly inherit toggleFilter <\/em><\/strong>from its parent component.<\/li>\n\n\n\n
Each <span><\/strong> created by image.categories.map()<\/em><\/strong> now contains an onClick <\/em><\/strong>event that fires off the toggleFilter <\/em><\/strong>function.<\/li>\n<\/ul>\n\n\n\n
Filtering Functionality is Finished! *Phew*<\/h2>\n\n\n\n
We first added the category filter buttons to the App <\/strong>and ImageCard <\/strong>components. These buttons are dynamically built using the images.json<\/strong> data, no hard-coded tags necessary<\/em>. This allows us to add, remove and edit categories on the fly without ever touching the app itself.<\/p>\n\n\n\n
Then, we built a series of useState <\/em><\/strong>methods and functions that capture categories when the buttons are clicked. We applied the functions to App<\/strong>, sent them through ImageGallery <\/strong>so they can eventually be inherited and utilized by the ImageCard <\/strong>component.<\/p>\n\n\n\n
In the next part,<\/strong> we’ll add more functionality to allow the user to click an image to see it full-screen. We’ll also add a fun function that shuffles the images every time the app is loaded.<\/p>\n","protected":false},"excerpt":{"rendered":"
Add crucial interactivity to your Art Gallery React App by building filter functionality. Dynamically create filter buttons by pulling data from your JSON.<\/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-45","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\/45","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=45"}],"version-history":[{"count":4,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions\/65"}],"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=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Category](\"https:\/\/www.shawntgray.com\/blog\/wp-content\/uploads\/2025\/06\/category-buttons-app-1024x113.png\")
<\/figure>\n\n\n\n![\"Category](\"https:\/\/www.shawntgray.com\/blog\/wp-content\/uploads\/2025\/06\/category-buttons-imagecard.png\")
<\/figure>\n\n\n\n