Build a React Search Bar: A Step-by-Step Guide

This guide shows you how to create a fully functional search bar in your React application using Material UI.

Getting Started

1. Install Material UI:

npm install @mui/material

2. Create the Search Bar UI: Import the TextField component from Material UI into your App.js.

import TextField from '@mui/material/TextField';

Add a basic text field, styled as you like. Here's an example using Material UI's TextField component:

<TextField id="outlined-basic" variant="outlined" fullWidth label="Search" />

3. Add Dummy Content: Create a ListData.json file with sample data. You can use a service like Mockaroo to generate realistic test data.

[
  {"id": 1, "text": "Devpulse"},
  {"id": 2, "text": "Linklinks"},
  // ... more data
]

4. Map Data to a List: Create a List.js component to display your data as an unordered list (<ul>). Map your data to create list items (<li>).

5. Implement Search Functionality:
   • Use React's useState hook to manage user input.
   • Use the onChange event handler to update the state whenever the user types.
   • Use JavaScript's filter() method to filter your data based on the user's input. Remember to convert both the input and your data to lowercase for case-insensitive searching.

const filteredData = data.filter((el) => el.text.toLowerCase().includes(inputText));

Styling (CSS)

Here's an example of basic CSS to style your search bar and list:

.main {
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  flex-direction: column;
  row-gap: 20px;
}

/* ... more styles */

Result

You'll have a fully functional search bar that filters your list dynamically as the user types.

<img src="https://builtin.com/sites/www.builtin.com/files/inline-images/1_react-search-bar.gif" alt="Animated GIF of React search bar in action">

For the complete code and more details, check the original source.