How to Implement a Search Bar in React

Search Bar that filters through the seeded data from fetched API
  • Ant design search input
  • API endpoint to fetch the data
  • React hooks to build in functional component
  • functions to handle the filter in search
  • CSS to implement search bar dropdown and scroll
  1. Create SearchBar.js component
  2. Import and implement Ant design search input
import {Input, Space, Button} from "antd";
const {Search} = Input;
const SearchBar = () => {const onSearch = value => console.log(value);return(
<div className="search">
<div className="searchInputs">
<Search
placeholder="input search text"
onSearch={onSearch}
enterButton
/>
}
export default SearchBar
import {useState} from "react";
import {Input, Space, Button} from "antd";
const {Search} = Input;
const SearchBar = () => {
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [error, setError] = useState("");
const onSearch = value => console.log(value);.
.
.
return(
<div className="search">
<div className="searchInputs">
<Search
placeholder="input search text"
onSearch={onSearch}
enterButton
/>
}
export default SearchBar
import {useState, useEffect} from "react";
import axios from "axios";
import {Input, Space, Button} from "antd";
const {Search} = Input;
const SearchBar = () => {
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [error, setError] = useState("");
useEffect(() => {
axios("http://localhost:3001/users")
.then((response) => {
console.log(response.data);
setData(response.data);
setFilteredData(response.data);
})
.catch((err) => {
console.log(err);
setError(err);
});
}, []);
.
.
.
const onSearch = value => console.log(value);return(
<div className="search">
<div className="searchInputs">
<Search
placeholder="input search text"
onSearch={onSearch}
enterButton
/>
}
export default SearchBar
import {useState, useEffect} from "react";
import axios from "axios";
import {Input, Space, Button} from "antd";
const {Search} = Input;
const SearchBar = () => {
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [error, setError] = useState("");
const [input, setInput] = useState("");
useEffect(() => {
axios("http://localhost:3001/users")
.then((response) => {
console.log(response.data);
setData(response.data);
setFilteredData(response.data);
})
.catch((err) => {
console.log(err);
setError(err);
});
}, []);
const handleFilter = (e) => {
console.log(e);
const searchInput = e.target.value;
setInput(searchInput);
const newFilter = data.filter((value) => {
return value.first_name.toLowerCase().includes(searchInput.toLowerCase());
});
if (searchInput === "") {
setFilteredData([]);
} else {
setFilteredData(newFilter);
}
};
return(
<div className="search">
<div className="searchInputs">
<Search
placeholder="input search text"
value={input}
onChange={(e) => handleFilter(e)}
enterButton
/>
</div>
{filteredData.length != 0 && (
<div className="dataResult">
{filteredData.slice(0, 10).map((value, index) => {
return (
<div className="dataItem" key={value.id}>
<p>{value.first_name} {value.last_name}</p>
</div>
);
})}
</div>
)}
</div>
)
}
export default SearchBar
.dataResult {
margin-top: 5px;
width: 300px;
height: 200px;
background-color: white;
box-shadow: rgba(0, 0, 0.35) 0px 5px 15px;
overflow: hidden;
overflow-y: auto;
}

--

--

--

Fullstack Software Engineer | Musician | Food Lover | Coffee Addict

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Grace Yuiko Nakano

Grace Yuiko Nakano

Fullstack Software Engineer | Musician | Food Lover | Coffee Addict

More from Medium

Create a nav bar with React Routers

Using Hooks vs. Class Components in React

My first dive into React

Using combineReducers in React