Building A Category Filter With ReactJS | MERN Stack
Comprehensive step-by-step guide for one implementation of data filtering
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.
- An already-up-and-running ReactJS app
- An already up-and-running NodeJS app with ExpressJS
- 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:
Four React Components —
- The Category Filter
- The Category Filter Button
- The Category Filter Dropdown
- The Category Filter Multi-Select Input
*I’ll also include my CSS file for anyone interested.
Update ExpressJS endpoint —
- 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:
line 8we import the
Line 18 & 19we add the applicable state to the component.
Line 27we encode the selected categories from the inputs and add them as query parameters to the backend endpoint.
Line 29we append the encoded categories to the query params of the request.
Line 52 -- 61we 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
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
CategoryFilter component we will add return two other components, the
CategoryFilterButton & CategoryFilterDropdown
CategoryFilterDropdownwill 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 will set the
setMultiSelectExpanded state to
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
Noted pieces of the
Lines 9 — 14we 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.
Lines 22 — 30iterate through the categories and generate the inputs through the
- Pass the
currentCategories & categoryQuerystate to the category input component.
- We pass the
indexto the component to be used as the
keyfor each input.
STEP 5 — The
Noted pieces of the
Lines 6 — 14we update the array of selected categories when clicked. The
onChangegets fired and calls the
handleChangefunction every time an input is clicked. This will remove and add them to the array of state called
currentCategoriesthat is used all the way up in our top-level component to send via the query params to the backend server.
Lines 16 — 18we created a function called
checkedInputthat 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:
Line 13we parse the array of categories sent from the frontend, we then will pass those categories to the mongoose
findfunction and return only the applicable
poststhat 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!
- 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.
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.