React/Search Bar/

How to integrate the search bar in react.js?

Published on

A search bar helps to filter out what is necessary and find the user their desired result. In this post, I would like to share a way to create a search bar and simple filter functionality in the React.js application.

Introduction :

Having a search bar on your website is not a fancy thing anymore, it become a mandatory feature for every website to give convenience to their users to directly find the required information they looking for on the given website. In this blog, we are gonna explain how to add a search bar to a react.js website in a detailed manner.

React js :

Reactjs is much easier to learn and use. ReactJS is a free and open-source front-end JavaScript library for building user interfaces based on UI components. to create interactive applications for mobile, web, and other platforms. To know more about relative links click here

Flow Diagram:

Prerequisites:

Node
React

Steps:

Step 1: Install Nodejs

Before we create React App we need to install node.js.

if you already installed node.js please ignore this step 1 and go to step 2

Step 2: Create a React-app

After installing Node.js open the terminal or command prompt and create the react app with the following commands.

1npx create-react-app search_bar

Step 3: Configure the Search bar:

In this blog we are going to use a static JSON file with various frontend technologies names as source data for search, to add static JSON content please navigate to the components directory and create a file called Data.js
In /components/Data.js, add the following JSON Data.
1export const Data = [ 2 { id: 1, "Name": "Angular" }, 3 { id: 2, "Name": "Vue.js" }, 4 { id: 3, "Name": "Next JS" }, 5 { id: 4, "Name": "React JS" }, 6 { id: 5, "Name": "Ember JS" }, 7 { id: 6, "Name": "Svelte JS" }, 8 { id: 7, "Name": "Gatsby JS" }, 9 { id: 8, "Name": "Nuxt JS" }, 10 { id: 9, "Name": 'Bootstrap' }, 11 { id: 10, "Name": "Node" }, 12 { id: 11, "Name": "Spring boot" }, 13 { id: 12, "Name": "Express JS" }, 14 { id: 13, "Name": "Laravel" }, 15 { id: 14, "Name": "Micronaut" }, 16 { id: 15, "Name": "Mocha JS" }, 17 { id: 16, "Name": "Jasmine" }, 18 { id: 17, "Name": "Jest" }, 19] 20
A Sample code for the /components/Data.js file can be found in the following GitHub URL.

react_on_page_search_integration/Data.js at master · episyche/react_on_page_search_integration 

If you wish, you can pull the source data for the search from Any API instead storing a static JSON file.

3. Now go to your src directory and open your App.js file. Now inside your render function please add the following code.

1import './App.css';
2import { Data } from './components/Data';
3import { useState } from 'react';
4
5function App() {
6  const [map_data, setmap_data] = useState(Data)
7
8  function searchdata(e) {
9    var i, td, filter, txtValue;
10    filter = e.target.value.toUpperCase();
11    var show_datas = []
12    for (i = 0; i < Data.length; i++) {
13      td = Data[i];
14      if (td) {
15        txtValue = td.Name;
16        if (txtValue.toUpperCase().indexOf(filter) > -1) {
17          show_datas.push(Data[i])
18        }
19      }
20    }
21    var arr = show_datas.filter(function (item, index, inputArray) {
22      return inputArray.indexOf(item) === index;
23    });
24    if (show_datas) {
25      setmap_data(arr)
26    }
27  }
28
29  return (
30    <div className="App">
31      <div className='heading'>
32        <p>Search bar</p>
33      </div>
34      <div className='search-bar'>
35        <input type="search" onChange={searchdata}></input>
36      </div>
37      <div className='whole-map'>
38        {map_data.map((e) => (
39          <div key={e.id} className="map-data">
40            <div className='map-id'>
41              <p className=' '>{e.id}</p>
42            </div>
43            <div className='map-name' >
44              <p className=''>{e.Name}</p>
45            </div>
46          </div>
47        )
48        )}
49      </div>
50    </div>
51  );
52}
53
54export default App;

A Sample code for the /App.js file can be found in the following GitHub URL.

react_on_page_search_integration/App.js at master · episyche/react_on_page_search_integration

4. In App.css, add the following code to style your pagination.

1/* custom css */
2.heading {
3  font-size: 30px;
4  font-weight: 700;
5}
6.search-bar input{
7  width: 400px;
8  height: 40px;
9  border-radius: 5px;
10  font-size: 20px;
11  text-align: center;
12}
13.whole-map {
14  height: 440px;
15}
16
17.map-data {
18  width: 450px;
19  display: flex;
20  margin-left: auto;
21  margin-right: auto;
22  gap: 2px;
23  font-size: medium;
24  margin-top: 10px;
25}
26.map-id {
27  width: 50px;
28  display: flex;
29  flex-direction: column;
30  justify-content: center;
31  border: 1px solid;
32  background: rgb(239, 136, 136);
33}
34.map-name {
35  width: 400px;
36  flex-direction: column;
37  justify-content: center;
38  border: 1px solid;
39  background: rgb(232, 237, 129);
40  border-radius: 0 10px 10px 0;
41}

A Sample code for the /App.css file can be found in the following GitHub URL.

react_on_page_search_integration/App.css at master · episyche/react_on_page_search_integration

Finally, Run the Django application using the following command.

1 npm start

A Sample GitHub repo, with all the required configurations, is given below.

GitHub - episyche/react_on_page_search_integration

Result:

After finishing all the steps mentioned above, please go to the web browser, and try to access the React application (i.e. http://localhost:3000). An example output screenshot is given below.