Create a Search Bar with React and Material UI

#javascript #webdev #tutorial #react

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: