Building A Category Filter With ReactJS | MERN Stack

Comprehensive step-by-step guide for one implementation of data filtering

Visual Created In Figma

While building my website, the need for a category filter became apparent when searching for blog entries. I decided to keep track of my changes and post the result. Join along for a step-by-step walkthrough of my implementation.

TECHNOLOGY ASSUMPTIONS:

1. An already-up-and-running ReactJS app
2. An already up-and-running NodeJS app with ExpressJS
3. MongoDB setup with documents to use and a connection to your NodeJS application already built.

NOTE ON CONTINUATION OF PREVIOUS POST:

This is a continuation of my previous post: Pagination and Fuzzy Search With ReactJS

LET’S GET GOING:

Before we start the tutorial, let’s take a look at what we will be building:

IMAGES OF THE CATEGORY FILTER:

GIF OF THE INTERACTION:

Technical overview of what we will be building:

FRONTEND:

Four React Components —

1. The Category Filter
2. The Category Filter Button
3. The Category Filter Dropdown
4. The Category Filter Multi-Select Input

*I’ll also include my CSS file for anyone interested.

BACKEND:

Update ExpressJS endpoint —

1. Add a query to return the applicable documents from MongoDB based on the category selections

After we add these pieces, it will be clear how you can implement the same or similar solution in your application. Let’s get started.

FRONTEND IMPLEMENTATION — REACTJS

STEP 1 — Add The Category Filter to the project

WARNING: I’m going to add a bunch of code here. You can ignore most of it and I’ll highlight the applicable pieces.

Applicable Code For This Tutorial:

1. On line 8 we import the CategoryFilter component.
2. On Line 18 & 19 we add the applicable state to the component.
3. On Line 27 we encode the selected categories from the inputs and add them as query parameters to the backend endpoint.
4. On Line 29 we append the encoded categories to the query params of the request.
5. On Line 52 -- 61 we add the component to the return section of this component. You can see that we add the react hook state from lines 18 & 19 to the CategoryFilter component

NOTE: As referenced above, all of the other code in this file can be understood by going back and reading my other article. The other pieces of code implement the pagination and text search for the elements we are displaying -> Pagination and Fuzzy Search With ReactJS

STEP 2 — The CategoryFilter Component

In the CategoryFilter component we will add return two other components, the CategoryFilterButton & CategoryFilterDropdown

1. The CategoryFilterButton & CategoryFilterDropdown will take the applicable state as props, shown in the example above.

This component creates a button that users can click to initiate the dropdown, and the dropdown for users to select the categories they wish to filter on.

STEP 3 — The CategoryFilterButton component

This CategoryFilterButton component will set the setMultiSelectExpanded state to true and false — Flipping that state will expand the CategoryFilterDropdown from open to closed show in the GIF at the top of this tutorial.

NOTE: The “arrow.svg” included in this file is a basic down carrot that is shown above in the example of the button. We will rotate it 180 degrees when clicked to spice up the component on click.

STEP 4 — The CategoryFilterDropdown component

Noted pieces of the CategoryFilterDropdown —

1. On Lines 9 — 14 we set the state for the category inputs, the Labelto be shown for the input and the Valueto be sent to the server in the query params.
2. On. Lines 22 — 30 iterate through the categories and generate the inputs through the CategoryInput component.
3. Pass the currentCategories & categoryQuery state to the category input component.
4. We pass the index to the component to be used as the key for each input.

STEP 5 — The CategoryInput Component

Noted pieces of the CategoryInput component:

1. On Lines 6 — 14 we update the array of selected categories when clicked. The onChange gets fired and calls the handleChange function every time an input is clicked. This will remove and add them to the array of state called currentCategories that is used all the way up in our top-level component to send via the query params to the backend server.
2. On Lines 16 — 18 we created a function called checkedInput that will ensure when we open the dropdown the correct checkboxes will be selected based on the current state of the categories.

That wraps up the frontend of this tutorial, once that is implemented you should be able to see and interact with the “category filter” component. Now let’s wire it up with our backend.

BACKEND IMPLEMENTATION — NODEJS, EXPRESSJS, MONGODB/MONGOOSE

STEP 1 — Update the ExpressJS endpoint to expect the categories sent from the Frontend

*Note: This tutorial assumes you have a NodeJS backend with ExpressJS, MongoDB, and Mongoose

Applicable pieces of this route file:

1. On Line 13 we parse the array of categories sent from the frontend, we then will pass those categories to the mongoose find function and return only the applicable posts that includes one of the categories sent from the React UI.

NOTE: Here is my post.js set up for Mongoose and MongoDB:

• Note — Here is an example of a post document in MongoDB:

That wraps up this tutorial on filtering with ReactJS — Hopefully, you have found this helpful when implementing your filtering solution.
Let me know if you noticed something I missed or have any questions!

EXTRAS:

• Here is the CSS file used to build the CategoryFilter Component and all the children components: USE IT AT YOUR OWN CAUTION, I DIDN’T SPEND TOO MUCH TIME ON THIS PART BUT THOUGHT IT WOULD BE USEFUL TO SHOW.

ClickAwayListener:

Notice on line 52 of the first component shown, index.js we include a component called ClickAwayListener that is a plugin -> ClickAwayListener API.

It’s super easy to install and use, it basically handles a request whenever you don’t click on the surrounding component. This was perfect for the Category Filter Button because we wanted to close the dropdown whenever it was opened and a click event was fired outside of the button.

You can see on line 44 — 46 we handle the click-away and update the state to close the expanded dropdown. It’s a pretty neat plugin, I recommend it for this type of interaction.

RESOURCES:

1. https://mui.com/base/api/click-away-listener/