How to Query a Database With a Search Bar: React App/Hooks

I recently created a project where I had to query a API from a search bar. Building it out was very fun and the practice is quite common, which can only mean one thing: make a blog post on it. Let’s get into my step by step process of building it out.

The Form

You are going to wan’t to create a form with some sort of input for the user. I created a simple form with a textfield within it. I am using Material UI components. Styling and such here is in the eye of the beholder, the important part is just getting the form and the textfield input. Be sure to include the onSubmit event set equal to your function that will handle the logic. Also be sure to add a button with “type=submit” to make sure the event is fired. Everything else besides “inputRef” is for styling, but we will talk about that in a bit. All that is necessary is the what I mentioned above. Let’s take a look at handling the search next.

Handling the Submit

Here is my handleSearch Function. There is a few things going on here so let’s break it down. I am using the useRef hook to handle my user input on the form. You could do this with the onChange event, but I have been learning about hooks and useRef makes input forms too easy to ignore it. So, first I create the ref and assign it the value query. For this to work I have to pass this reference to the form as you see in the inputRef={query} statement.

Note: “inputRef” is an attribute native to Material UI, if you are using a regular html input you use ref={query}. This ref attribute allows you to access elements or nodes within the render method. More on refs.

Now that “query” has access to my form we can start forming out the query to send to the API. In our handleSearch function we want to prevent the default action of the button to stop a reload, and then the cool part.

const queryVal = query.current.value

the .current is something that comes with the useRef hook. It allows us to grab the current value of the textfield as the user is making changes. If you have ever done this with the onChange event you know that it is a lot more work than using useRef. Cool right? We love things that make our lives easier. Now that we have our user’s input value at anytime, we can pass it to our fetch function that will make the request to the API with the given query!

Note: the .trim() is an awesome JS method that removes the whitespace from either side of the string. This is important when querying an API as extra spaces may invalidate the request.

The Fetch Request

Note: ignore all the state besides movies.

Here we have our fetchMovies function that is taking in our query we passed from the search bar. We want to make sure we interpolate our API string so that we can place our {query} inside. All API’s have different documentations so be sure you place your query in the right spot. We then set our movies state with data results returned from the request. I had to use dot notation to access the search results with “.Search” because of how my results were returned. Your API may differ, console logging your data will help you determine where the data you want is stored. More on fetch requests here. You now have the data related to your search within your state, allowing you to manipulate it however you please. Hope you enjoyed!