Simple Search-bar Component & Functionality in React
Fellas, in this post i would like to share a way to create search bar and simple filter functionality in React. Without further ado, here are the 4 simple steps to do it.
Step1. Set up a React App
In this post, we are going to create a single html page showing a list of countries taken from REST COUNTRIES API. We can then filter which countries we want to show by typing the name of the country on the search bar. We can start by initiating our React App with :
npx create-react-app my-appIn our App.js file, delete all unnecessary files and put a SearchPage Component within the DOM structure as shown bellow:
The SearchPage Component will be the entry component to arrange our SearchBar component and CountryList component. At the moment, these components do not exist yet. Hence, this leads to the next step which is creating the three js files: SearchPage.js, SearchBar,js and CountryList.js.
Step2. Create SearchBar.js
In this step we set up the Search Bar Component. This component is just a basic input with a little bit of styling. Pay attention to the props passed to the component: keyword and setKeyword. The keyword variable is assigned to the value of the input meanwhile the setKeyword variable is assigned as a function to handle the change event of the input. These variables are initiated in the parent component (SearchPage.js) which makes the SearcBar.Js just act as a “tool” to read and change the keyword value in the SearchPage.js.
Step3. Create CountryList.js
This component shows the list of the country. In essence, this component is just a mapping of the countryList variable, displaying simple div tag containing an h1 tag describing the name of the country. It is important to understand that the main role of this component is just to render all of the country list that are passed into it via the countryList props.
Step4. Create SearchPage.js
This component is the parent component of SearchBar.js and the CountryList.js. The functions of this component are to bind those two component and orchestrating the rendered data as well as the searched keyword.
First, the data is fetched through the API URL. After that we keep the data within two variables: countryList and countryListDefault with . This function is operated by the fetchData constant, initiated within the react useEffect feature.
Next, we create a function to handle the keyword change and filtering the country list. The function is contained in the updateInput constant. So, this is the most “meaty” part of this process. What we actually do in this function is capturing and adjusting the keyword typed in the SearchBar so that the keyword can be displayed accordingly in the SearchBar while almost simultaneously update the list of the country data that is passed as props to the CountryList Component. This process is done by receiving the input argument and use it to filter the list of country data in the countryListDefault variable (line 19–21). The filtering process makes use of the includes operator of javascript array method. Next, we use this filtered data to update the content of Input variable. This way the value showed by the SearchBar will always be updated whenever the input (keyword) is changed. At the same time we also update the list of country data with that filtered data so that the data passed to the CountryList component is always updated according to the filtered country list. This is done by invoking setCountryList function using filtered variable as argument(line 23). This mechanism ensures that the CountryList component always shows the list of countries that have been filtered by the keyword typed in the SearchBar Component.
Finally, we pass the input & updateInput variables as props to the SearchBar component. We also pass the countryList variable as props to the CountryList component.
Complete code can be seen in the snippet below:
To check our work, we can run the app with yarn start command from the terminal, open http://localhost:3000/ on the browser and see what we have developed so far.
Conclusions
React is a versatile and highly modular frontend framework. Developing an application with react requires a design / mechanism of how the components are interconnected each other to be able to serve certain functionality. Following this perspective, this post tries to breakdown the mechanism for filtering a set of list based on certain input and render the components accordingly.
I hope the explanation is clear enough and helpful. If you guys know better and faster way of doing it please share it in the comment.
Cheers!
