Create a Search Bar with React and Material UI
Tags: javascript, webdev, tutorial, react
Published: 2022-02-01 14:48:18

Today I wanna show you how you can create a Search bar with React and [Material UI kit](https://mui.com/)!
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:

```javascript
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:

```javascript
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.
```javascript
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:

```javascript
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:

```javascript
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:
![React Search Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmlerj9u9v1qgmt0inqw.png)

That's all! Thank you for reading and happy coding!😊