Next, empty the previous search array if any like this: // empty the previous search array if any If (searchString = null || searchString = "" || countries = ) return We will now build out the function to work as we desire.īegin by adding the following lines of code: // clear search result if the search field is empty
You should now have a second input box that doesn’t do anything just yet: Screen showing a second input box that doesn’t do anything just yet Fleshing out the function We will focus on the src/Helpers/HatchHelper.js file to build out the search function.Īlready we have the following code: // search countries by nameĬonst filterCountryByName = (name, countries, setResults) => from "./Helpers/HatchHelper" Let's begin with how you shouldn't build out your search functionality. You should now be able to navigate around the project and find your way. This function is being built in the src/Helpers/HatchHelper.js file.Īll styles are in the src/styles/App.scss file.
For each of these result, the src/components/Country.js file is rendered.Īs a user types into the input box, the filterCountryByName function is called to search through the countries we collected earlier. A search input box is situated above the list of results. In our src/App.js file, we display the results we have gotten. In the project you now have, we are fetching COVID-19 updates for every country in the src/context/hatchways.js file courtesy of coronatracker. The branch of interest is the starter-code branch.įollow the instructions in the ReadMe file to setup the project and you should have the following screen: Starter Project Screen I have cooked up a little application to give you a head-start if you want to code along with me. It will be easy to follow this tutorial if you have basic knowledge of: So stick with me and let me take you on this ride. And then we'll learn a much better way of doing it. This tutorial will first go through the "wrong way" of setting up search which many of us have adopted. Other times, frontend search might be necessary to improve a website’s speed and user experience in general. Some time ago, I thought that search functionality had to be built in the back end and called from the front end.īut as I continued building applications, I learned that sometimes, you might just have to search among the data retrieved from a public endpoint where there is no search endpoint. So if you are looking for the right way to build out search functionality on the front end of your site, you're in the right place. As a software developer, part of your job is to deliver the best user experience possible to those using your site or product.Īnd building a helpful and efficient search function is one way you can do this.
0 kommentar(er)
