There is nothing more rewarding then having a search bar on your application that returns as you're typing. But how?! We’ll be working in React today so let’s start by adding input and list keys to your state.
On this application I am using a movies API, but keep in mind you can use this technique with any API or database. Our next move is to create an input tag with a standard onChange method attached, and give this tag the value or our the input we just created inside of state.
As you can see below our onChange method updates our state’s input key to whatever has been typed into our input bar. Since I am using the movie API, we also have a helper method here which creates a fetch request to the API (but this is optional).
If instead we were to pull from an array in state our list or array to be displayed would look like this. After our handle change method of course being reduced to only whats on line 31.
Using the built in JavaScript method .includes() we create a new array called items, which filters through all titles that include the string entered into your input tag. Happy searching!
