Programming A Search Bar in React.js; A UI For the Generation That Has No Clue What it Wants

Hey there, user! I’m gonna spiel for a small while on the course of development and why you should care about small utilities, such as a search bar, on your web app. If you’re just here for the code because you have 13 minutes left on your code challenge or technical; no sweat! Pop on down to the section that says TLDR; for a quick expo on usage and implementation. Now let’s do it!

Im willing to bet you were born between the years 1880, and now, and therefore if you’re like me, you go through the entirety of the day in a lull of ambiguous stirrings that most closely resemble longing with no apparent direction or entity of particular in sight. In other words, you want to want. That’s okay! I want to want too! In fact, this might be the first time in history that everything you want is within the grasps of your fingertips- you are pretty lucky!

The internet has universalized the construct of convenience. That is the root of it. We saw the potential for the fast and easy dissemination of information, and through that the binding of the communication sector with the expansion of the internet, we’ve arrived at a beast that has run rampant within the last half a century. Within that half century, we’ve traversed from static webpages offering you text-based information, to the first search engine platforms, to the advancement of the speed of communication in email and instant messaging, and now as we currently stand, our iPhone’s maintain more computing power than the rockets that had put Buzz Aldrin’s footprint on the moon. Yes Buzz Aldrin got the mention this time! There’s a first for everything.

If you are a developer however, what should be most important to you right now is furthering your own development skills, as well as creating a UI/UX for your user that facilitates the process of his/her browsing seamlessly. That is the appeal of proper web development; the seamless nature of flow. There was absolutely a point where the browser would be this stop and go traffic mechanism, constantly forcing redirects and slow fetch times for back end data that ultimately left a bad taste in the user’s mouth, who doesn’t understand that your Alt Mus app is trying to load 41,000 instances of The Strokes and Weezer for them and they should just be patient! Patience is no longer a virtue for the web developer; its my UX and I want it now!

The absolute last thing you want your website to stick out for in today’s age is inconvenience. You have to want to have every single thing your neighbor has and more; and you should! Because when it comes to your website, its not a matter of funding as much as it typically is time. I have hit countless deadlines, and bore much nausea over review of my previous code because it always dawned on me, `ah yes well I suppose this app also really calls for ${insert blah here}`. Well don’t you fret! That is the beauty of development; you’re still developing, and there’s a good chance you won’t ever see a day in your lifetime where you, and the entire sector of web development, isn’t expanding. We exist a time in space where man stands on the absolute precipice of the information abyss, and save for the Amish, man took his floaties off, strapped bricks to his ankles, and teetered feet first over the side. And so now that we have, it is absolutely crucial to stay up to date on what your user expects, demands, and what you as a developer should have to stay contemporary.

TLDR; Search Bar Implementation and Code

Okay so, this section is specifically posed at individuals who find themselves using the React JS library to compose their front ends for their applications. Lets touch up on a quick review of some key terms to know right now;

Component; These are what your application’s user interface is going to be primarily composed of. React makes use of the class feature of javascript, and has allowed you to create components that can be classes (such would have access to a property called state- that’s important), as well as functional components which are functions, not classes, and do not have access to store state. These components return JSX elements, which React uses to comprise a virtual DOM, which the library then metastasizes in the actual DOM.

State; Class components have this to store data, typically received from props and altered in some manner that requires that data to be stored somewhere. These can be passed down to children components of the parent component in the form of props.

Props; These are attributes that are passed down from the parent component to the child component, that the child component typically utilizes in the form of interpolating it into its rendered JSX elements, and in that way creating a way to have dynamic content on the DOM.

So let’s get into search bars. Let me break down how the structure for this is going to go in a super simple example; a bookcase. If you ran ‘npx create-react-app bookcase-demo’ and generated a React app from scratch, what you would want your component tree to resemble is this:

(App) ==> (SearchBar) / (BookCaseContainer) ==> (Books)

So within App, your state is going to want a key of filter: with a value of “”. This value is actually going to be set later from within the search bar component! And while you would normally call a fetch to an api to get instances of data for your front end, lets suppose that for now we have an array that exists in the same file as app that contains all the information about each book object. So what we need is a way for filter to impact the books that are rendered to the BookCaseContainer, as well as a way to have the search bar affect the state of filter in app.

What we can do to achieve these goals is create a callback function in App, and lets call it handleChange, because its going to handle changing the value of filter to the value input by the user in the search bar. That function will resemble this:

And now if we pass down this function as a prop to be called onChange within the input field of the search bar, we’ll have a mechanism to alter the value of filter within the state of App from the SearchBar component as long as we’ve properly named the attributes of the event (input/change) that’s occurring in the SearchBar component. Here’s some more code for ya:

Now all we need is a way to implement that in App so that the BookCaseContainer only knows about the books that fit the criteria of the search bar. The array function filter combined with include is a phenomenal route to go, just remember to implement a .toLowerCase() or .toUpperCase() to standardize the characters in the input to account for user’s not capitalizing properly (because its on you as a developer to account for the user experience! I didn’t say it was fair!). That code should resemble this:

As a note, I had stored my instances of book in state for this code snippet where this was pulled from. But this guarantees that if the filter is set in app, only the books that match that criteria should be returned! Now all you have to do is pass that function down as a prop to your BookCaseContainer component, and it will only ever know about the books that fit the search. And what did that utility take, 25 total lines of code? If our apps can be better, they should be better, and through implementations of quality application functions such as a Search Bar, your app will no longer have to stare resentfully at the app across the street, and wonder why it doesn’t have a shiny new search bar like that.