Build a Search Bar in React.js
This blog is for people who have a basic understanding of react.js
In this blog, we are going to build a simple application in react.js that displays a search bar at the top and a list of flower names below, aka our fake data. The search bar will allow us to type into an input field that will search through our fake data and display the flower name(s) instantaneously on the screen. We will be using class based components to achieve this.
Getting started
To create a new react project, run:
Remove all unnecessary files as highlighted below:
Create a component subfolder in the src folder. Then create two child components named FlowersContainer and SearchBar.
Use the following code for CSS styling. You are welcome to style the application as you please.
Setup App Component
App.js will be your main component where all your data and instance methods will be stored. See image below for my code.
Now lets break down this code!
Line 7: state
In our state object, we have a “flowers” state that has an array of flower names as its value. We also have a “searchTerm” state that has an empty string as its value which will represent the search term that we will be typing into our search input field.
Line 21: handleSearchTermChange function
The handleSearchTermChange function will be passed as a prop in the SeachBar component. When triggered, setState will update the value of “searchTerm”.
Line 25: filterFlower function
The filterFlower function will be our callback function that will be passed in the filter method below. The toLowerCase() method will change the strings to be lower cased. The split() method will divide the string into substrings at each space in the string and place the substrings into an array. Then the join() method will take that array of strings and combine them into one string with no spaces. When the user types into the input field, the input can be case insensitive and will disregard empty spaces in the flower names with multiple words. You may have noticed that we also included “indexOf(normalized) !== -1” in flower. This checks if the string we are typing exist in the flower names.
Line 30: JSX
In the App component’s render method, we have the SearchBar child component, and our filter and map methods with the FlowersContainer component passed in. The filter method will create a new array with all the flower names that pass the test which is our filterFlower function. Then we call the map method that takes in our filtered array of flowers to be parsed into individual flower components.
Create FlowersContainer Component
The FlowersContainer component will display the elements that looks similar to whatever we type into the search input field.
Create SearchBar Component
The SearchBar component contains an onChange event that passes our handleSearchTermChange function that sets the searchTerm to “e.target.value”. When we type into the search input field, setState is triggered in handleSearchTermChange, then our App component re-renders.
Your final product should look like this:
There you have it! I hope you enjoyed my little tutorial. This is just one of the many ways to create a search bar in react.js.
Resources:
