Filtering in React

React is a fantastic way to make your JavaScript code more reactive to the inputs from the user, and one of the best ways to dynamically re-render your page to help your users is to add a search bar that can filter the data on your webpage.

Watch out, Google, whoever reads this will be able to make a super simple search bar (I hope)!

Let's look at a simple example of a filter now. Say your very important bank client needs you to filter their database array of Dungeons & Dragons classes (a very realistic example and not just something that I was working on).

As we can see, we have a search bar and an array of images with names. We'll want to be able to type into the search bar and have the array objects update as we type to match the text as we type it.

First, we'll need to set state in React. To do so, we'll need to import useState at the top of the page, like so:

You might also note that I imported useEffect, as well, which was part of the fetch() GET Request that I used to help populate the page with my array of data. We'll get to that in just a second! First, we'll want to use our useState, to declare the state that the page will begin at when it loads and allow us to re-render the page as the user interacts with it.

All of the rest of our code is located in one function, which we'll just call App(). Within this function is we set the state for the array that we render on the page and the filtered version of the array.

Note how both useStates are set to an empty array useState([]), as we want the page to begin as an array.

We then call our fetch() GET request to get the information from the array. The final lines of the GET request assign the data to our state setting functions for the full array and our filtered array.

For bonus points, you can note how we used useEffect() to prevent our fetch() GET request from making infinite requests. We won't dwell on that here, just know that you'll be fine if you follow that syntax.

Now that we have the array data, we can build the filter function!

We'll write an if, else statement, where the first part is setting what the default of the page looks like. So if the search bar has an empty string "" (like when the page loads) we will return the full array by setting our filter state to the full array without any filter: SetFilter(classes)

If it's not an empty string, then we will run the array through a filter that will look at that the user typed (our searchTerm variable).

But there are some problems with filter()! Filter only matches exact strings, so it won't match "Stupid" with "stupid", which is stupid. It also won't match parts of strings, like "You've gotta be kidding me" with "You've gotta be kidding m"

To get around this, we add in the methods .toLowerCase() to make all the text typed lowercase, getting around the need to match cases. We also use .includes() so that what the user types also pulls up any partial matches in strings in the items in our array.

(Please also note that in the filter() method we can't call the singular version of classes, classes, as that is a special word in JavaScript and must be avoided! I switched to "c", and now you can avoid my mistakes. My many mistakes.)

If we want to search keys from our array besides our classes.name key, we can add in an "or" statement with || and add in a second key of classes, such as classes.role, like so and have a second set of strings that the user can search by. Nice!

Make sure to pass our filter variable and function as props to our component to hold the array and into a component where we will handle the user interacting with the filter bar. We're getting close to this working!

In the the Filter prop, we'll write the logic for capturing the strings that the user writes in the search bar and to make it reflect re-render the DOM as the user types the string.

First, we'll set state to an empty string, as that is how the search bar will begin. We then write a function that sets the state of the search bar string to what the user writes and the state of the filtered array function to be the same.

Finally, we can set the return of the Filter function to include an onChange event that is equal to the function we just set, so that it (and our filter!) fire off as the user types.

Viola! We can now search to our hearts content! "Bar" returns "Barbarian" and "Bard"! "Support" returns "Artificer" and "Bard".

Filter to your hearts content for all the very important TTRPG-related activities in your life!