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

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.

const queryVal = query.current.value

The Fetch Request

Note: ignore all the state besides movies.