Filtering Content Using State -- a sort-of beginner's guide

I decided to write this up to help keep everything in order in my head. Hopefully it helps you too!

This article is only meant as a general guide and will assume a basic knowledge of State and how to implement it, but if you are interested in something a bit more specific and comprehensive, you should probably keep looking. While I will provide some examples and briefly explain elements of them, a lot of information is being glossed over.

Now, just to provide a bit of context... we know State is used to handle dynamic information which can allow users to interact with our applications. Implementing State with events is very similar to how vanilla Javascript handles event listeners, at least principally speaking. Glossing over a lot of pretext, in both, at the most fundamental level, we need to indicate that some structure should be waiting for something to happen (click, keypress, mouse movement, etc.) and, once it does, the application makes something else happen as a result. That’s basically where using State with React and just coding in vanilla JS diverges for event handling, because getting an application to do those next steps in vanilla JS can take a ton of code to achieve, when in React, State has this functionality built in.

An incredibly useful application of State to handle events in React is when we need to be able to filter some data-set dynamically based off of some user input. Distilled down, the steps to do this are as follows:

1. Start with some initial data-set.

This one’s pretty straight forward. Could be an existing database file, could be from some user input, could be generated by some other part of our application. Doesn’t matter. All that matters is that you have a LIST of stuff that may or may not need to be filtered. For this blog, let’s say we’re working with a grocery list.

groceries = [
        { id: 1, name: "bread", aisleNum: 1, onSale: false },
        { id: 2, name: "halloween candy", aisleNum: 4, onSale: true },
        { id: 3, name: "milk", aisleNum: 10, onSale: false },
        { id: 4, name: "eggs", aisleNum: 10, onSale: false }
    ]

2. Declare a stateful variable to monitor your filtering.

This is where the magic of React starts. When declaring a stateful variable, we not only establish one variable, but also a function that will be used to change the value of that variable AND re-render the element (remember when I said State has that “do something after” functionality built in???) as well as establish whatever the initial value, or state, of that variable should be. Let’s try and track which aisle the user wants to see all groceries for.

const [ groceryAisle, setGroceryAisle ] = useState("All")

You can see that initially we’re using the state “All” because we want the list to appear unfiltered initially.

3. Declare a variable to contain the filtered version of our data-set.

This is an extremely important step and you should be mindful of how this variable is populated with information. Without this step, you stand the risk of filtering your initial data-set and losing the values that are filtered out every time a filtering occurs. We typically want to preserve the original list to give ourselves some leeway with how we may want the application to perform.

There are many ways we might want to filter our data-set, but let’s stick with showing groceries in a specified aisle.

const filteredGroceries = groceries.filter((item)=>{
  if (groceryAisle === "All"){
      return true
  } else {
      return item.aisle === groceryAisle
  }
})

Notice anything in common between any of the above steps? Look at what value we’re using to check our filtering. It’s the state that we’re monitoring from step 2!

4. Use the filtered data-set!

You’d think this would be an obvious step, and you’d be right! Now that we have the filtered list, let’s do something with it. Maybe we want to render a “Grocery” component for each grocery item on our filtered list. Let’s write a function that can do that for us!

function groceryListBuilder(){
  return(
    filteredGroceries.map((product) => {
      return (<Grocery key={product.id} name={product.name} aisleNum={product.aisleNum} onSale={product.onSale}/>)})
  )
}

And that’s it!

Well…

You still have to mark some element with an event handler (something like onClick or onChange), and then reference the function that will handle the event (think something like handleAisleFilter) and trigger the setter function (setGroceryAisle), which in-turn triggers both the change in state and the re-rendering of the component it’s housed in (or some other component if you’re maybe using callback functions to push info up to a parent component). Oh also, that function that we wrote that builds the elements, you’ll still need to incorporate the returned elements into the component you’re working with…

But aside from all that, that’s it!