How to Create a Search Bar in React

A search bar is a very common type of input on many websites. It improves the user experience of any web application. It does this by reducing the time spent on looking for data from very long lists. Adding a searchbar to a single-page application can be challenging for some developers. This article will show you step by step how to filter a long list of data using a search bar in React js.

Step 1

Create a fresh React app. Call it search-app. Read React installation steps here

npx create-react-app search-app

Step 2

Create a folder called components inside the /src folder of your app project. Inside the components folder, create a file called searchBar.js. Import React, and the useState hook to this file.

import React, {useState} from 'react'

Understanding the significance of components can aid you in leveraging them effectively to build robust and scalable applications. React components are one of the crucial factors that you should pay attention to if you’re a a beginner and learning a competitive React JS Course.

Step 3

Create a functional component called *searchBar *using ES6 syntax.

import React, {useState} from 'react'


const searchBar = () => {}

Step 4

To the searchBar create a variable using the useState() hook.

const [searchInput, setSearchInput] = useState("");

Step 5

Now, create a constant array of countries with the name and continent properties

const [searchInput, setSearchInput] = useState("");

const countries = [

  { name: "Belgium", continent: "Europe" },
  { name: "India", continent: "Asia" },
  { name: "Bolivia", continent: "South America" },
  { name: "Ghana", continent: "Africa" },
  { name: "Japan", continent: "Asia" },
  { name: "Canada", continent: "North America" },
  { name: "New Zealand", continent: "Australasia" },
  { name: "Italy", continent: "Europe" },
  { name: "South Africa", continent: "Africa" },
  { name: "China", continent: "Asia" },
  { name: "Paraguay", continent: "South America" },
  { name: "Usa", continent: "North America" },
  { name: "France", continent: "Europe" },
  { name: "Botswana", continent: "Africa" },
  { name: "Spain", continent: "Europe" },
  { name: "Senegal", continent: "Africa" },
  { name: "Brazil", continent: "South America" },
  { name: "Denmark", continent: "Europe" },
  { name: "Mexico", continent: "South America" },
  { name: "Australia", continent: "Australasia" },
  { name: "Tanzania", continent: "Africa" },
  { name: "Bangladesh", continent: "Asia" },
  { name: "Portugal", continent: "Europe" },
  { name: "Pakistan", continent"Asia" },

];

Step 6

Create a handler function that will read changes in the search bar. Then create an if statement that will return the countries that match what has been entered into the search bar.

const handleChange = (e) => {
  e.preventDefault();
  setSearchInput(e.target.value);
};

if (searchInput.length > 0) {
    countries.filter((country) => {
    return country.name.match(searchInput);
});
}

Step 7

Next, create and input of type search inside the return statement of the searchBar which the user will type in.

<input
   type="text"
   placeholder="Search here"
   onChange={handleChange}
   value={searchInput} />

Step 8

Finally, create a Table element that will display the countries' full list. It should have two columns. These are the name column and the continent column.

<div>

<input
   type="text"
   placeholder="Search here"
   onChange={handleChange}
   value={searchInput} />

<table>
  <tr>
    <th>Country</th>
    <th>Continent</th>

  </tr>

{countries.map((country, *index*) => {



  <tr>
    <td>{countries.name}</td>
    <td>{countries.continent}</td>

  </tr>

})}
</table>

</div>

The final searchBar.js file must look like this below.

import React, {useState} from 'react'


const searchBar = () => {

 const [searchInput, setSearchInput] = useState("");

 const countries = [

  { name: "Belgium", continent: "Europe" },
  { name: "India", continent: "Asia" },
  { name: "Bolivia", continent: "South America" },
  { name: "Ghana", continent: "Africa" },
  { name: "Japan", continent: "Asia" },
  { name: "Canada", continent: "North America" },
  { name: "New Zealand", continent: "Australasia" },
  { name: "Italy", continent: "Europe" },
  { name: "South Africa", continent: "Africa" },
  { name: "China", continent: "Asia" },
  { name: "Paraguay", continent: "South America" },
  { name: "Usa", continent: "North America" },
  { name: "France", continent: "Europe" },
  { name: "Botswana", continent: "Africa" },
  { name: "Spain", continent: "Europe" },
  { name: "Senegal", continent: "Africa" },
  { name: "Brazil", continent: "South America" },
  { name: "Denmark", continent: "Europe" },
  { name: "Mexico", continent: "South America" },
  { name: "Australia", continent: "Australasia" },
  { name: "Tanzania", continent: "Africa" },
  { name: "Bangladesh", continent: "Asia" },
  { name: "Portugal", continent: "Europe" },
  { name: "Pakistan", continent"Asia" },

];

const handleChange = (e) => {
  e.preventDefault();
  setSearchInput(e.target.value);
};

if (searchInput.length > 0) {
    countries.filter((country) => {
    return country.name.match(searchInput);
});
}

return <div>

<input
   type="search"
   placeholder="Search here"
   onChange={handleChange}
   value={searchInput} />

<table>
  <tr>
    <th>Country</th>
    <th>Continent</th>
  </tr>

{countries.map((country, *index*) => {

<div>
  <tr>
    <td>{country.name}</td>
    <td>{country.continent}</td>
  </tr>
</div>

})}
</table>

</div>


};

export default searchBar;

Step 9

Import the searchBar component into the_ app.js _file and add it to the return statement JSX as follows.

import React from 'react'
import './App.css'
import SearchBar from './components/searchBar'

function App() {
  return (
     <div classname='App'>
       <SearchBar/>
     </div>
)}export default App

Run the app.

Conclusion

And there we have it. I hope you have found this useful. I will be back with more interesting articles. Thank you for reading.