A World Without a Filter (Creating a Search Bar in React)

Can you imagine the chaos the world would be in if we opened up Yelp to find a place to eat and we’re met with an unorganized, seemingly endless list of restaurants. Without a way to narrow down the options, indecisives like myself would go into a frenzy and people around the global would undoubtably starve. Luckily for us all, this dystopia of a universe doesn’t exist because of some extremely helpful and easily overlooked aspects of most web applications.

The Search Bar

Let’s all take a second and think about the website that we use the most, what’s something they all have in common? Wether it’s got rounded or sharp edges, short or long, a magnifying glass at the end, they all share what we know and love, the search bar. Doesn't matter if it’s a social media site like Twitter, a video hosting site like YouTube, or just a small eCommerce site like Amazon, that search bar is almost absolutely necessary. Can you imagine trying to navigate through YouTube without a search bar? I fear the amount of scrolling one would have to do to find their daily dose of cats playing the piano. Today, I will walk you through the steps of setting up a functioning search bar in React by using a Flatiron School lab I worked on. Here is the repo if you want to take a look and code along.

Displaying on the Page

With React, throwing a search bar on a page may seem as easy as making a new component and returning an input & maybe label tag..and it is!

We wrapped the search bar in a div tag then gave it a label and input tag.

And Viola! Our Search bar is now displaying on the page. Time to seach for our favorite plants an….Oh. It’s not working.

Adding an Event Listener

Surprisingly enough, getting the search bar to display is the easy part. Adding the functionality to it is where things start to get a little tricky, but fear not, React is here to help. For those who have used JavaScript before, we know the trick to letting users interact with a page is in adding event listners. So, how does React handle their events? For a search bar, you would want to add an onChange to the input tag like so..

We also added a value to make to this a controlled component

A simple console.log of the event will show that every time we press a key into the search bar we see that input update in the console. Time for useState and inverse data flow to help pass this input around our app and *filter* our plants to only show the ones we are looking for.

Inverse Data Flow

The trick to getting components to interact with each other is in the passing down of functions and variables from a parent element, in react we call this flow inversion. For this example, since we want changes in our Search component to update things in our Plant List component, we will be calling a useState in the component that is a parent of both Search and Plant List. Since every search bar starts off blank we can leave an empty string as the inital state. After that, we want to pass the state and setState down to the search component so that the onChange event can constantly update the search value in our Plant Page component and then pass down that updated value to Plant List where we can filter things out from there.

Our Parent Component, don’t forget to add useState on line 1.

Our Search Component, Replace console.log with setSearch and value with search.

Filter it Down

Last but not least, let’s update our DOM so we can finally find our beloved Bonsai tree. Previously, we were using a .map() to render each plant we had stored in our plants state, however if we wanted to widdle that down so we only rendered the plants whose names include the same letters as what we typed in our search bar, we can call another method for our plants array. Using .filter() we can also return a new array, similar to .map, but only the objects that are considered true are returned. In our case, the objects we want returned are the plants whose name include the same letters we are typing in the search bar and assign that new array to a variable.

We also are using toLowerCase() to make sure the search is case sensitive.

And to cap things off, we use this new variable that we created to render all of our plants instead of our regular array of every plant, like so.

before we made the filtered variable, we used the plants array of all the plants in our database.

Conclusion

A search bar is a key component to any successful web application. While throwing an input tag on a page to get it to display may seem simple, the functionality aspect of a search bar takes a little bit of work to get going.