Today I wanna show you how you can create a Search bar with React and Material UI kit!
So let's start cooking!๐ช
Step 1
To install Material UI kit run the following command in the terminal:
npm install @material-ui/core
Also we need to install Material Icons library. To do that run the following in the command line:
npm install @material-ui/icons
After the installation, import everything we will need:
import { useState } from "react";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import TextField from "@mui/material/TextField";
Step 2
First of all we will create a functional component for our Search bar:
const SearchBar = ({setSearchQuery}) => (
<form>
<TextField
id="search-bar"
className="text"
onInput={(e) => {
setSearchQuery(e.target.value);
}}
label="Enter a city name"
variant="outlined"
placeholder="Search..."
size="small"
/>
<IconButton type="submit" aria-label="search">
<SearchIcon style={{ fill: "blue" }} />
</IconButton>
</form>
);
This component will accept the setSearchQuery
function that we will change the state. We will also create the Text Field that will correspond to the search bar. Function that we pass to onInput
prop will handle the user input.
Step 3
Then we will create a function to filter our data. This function will return only elements that include our search query.
const filterData = (query, data) => {
if (!query) {
return data;
} else {
return data.filter((d) => d.toLowerCase().includes(query));
}
};
Also we will create data
array to represent our data:
const data = [
"Paris",
"London",
"New York",
"Tokyo",
"Berlin",
"Buenos Aires",
"Cairo",
"Canberra",
"Rio de Janeiro",
"Dublin"
];
Step 4
We will create our App functional component:
export default function App() {
const [searchQuery, setSearchQuery] = useState("");
const dataFiltered = filterData(searchQuery, data);
return (
<div
style={{
display: "flex",
alignSelf: "center",
justifyContent: "center",
flexDirection: "column",
padding: 20
}}
>
<SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
<div style={{ padding: 3 }}>
{dataFiltered.map((d) => (
<div
className="text"
style={{
padding: 5,
justifyContent: "normal",
fontSize: 20,
color: "blue",
margin: 1,
width: "250px",
BorderColor: "green",
borderWidth: "10px"
}}
key={d.id}
>
{d}
</div>
))}
</div>
</div>
);
}
Our App renders the array of our filtered data. Every time we type something in the search bar setSearchQuery
function will change the state of the app and we will render filtered data.
You should get something like this:
That's all! Thank you for reading and happy coding!๐
Top comments (2)
tnk u
Thanks