How to Create A React Autosuggest Component using MUI and NextJS

Jasser Mark Arioste

Jasser Mark Arioste

How to Create A React Autosuggest Component using MUI and NextJS

Introduction #

React is a popular JavaScript library for building user interfaces, and one of its strengths is the vibrant ecosystem of community-contributed components. An <AutoSuggest/> component is essential in modern web applications, providing users with a convenient way to search and select items from a list as they type. In this tutorial, we'll walk you through creating a React AutoSuggest component by using MUI and NextJS. By the end of this article, you'll have a better understanding of React and how to build custom components.

Final Output #

Here's the final output of what you'll be making:

React Autosuggest Demo

Prerequisites #

Before we start building our React AutoSuggest component, make sure you have the following tools and knowledge:

  1. Node.js and npm (Node Package Manager) installed on your computer.
  2. A code editor (e.g., Visual Studio Code).
  3. Basic knowledge of React.

Setting Up Your React Project #

To get started, create a new NextJS project using create-next-app or any other method you prefer. Open your terminal and run the following command:

npx create-next-app@latest --app --ts react-autosuggest-component-mui

This command will create a new NextJS project named "react-autosuggest-component-mui".

Installing Dependencies #

Next, let's install MUI since we'll need its AutoComplete component later on. Run the following commands on the same terminal as before.

cd react-autosuggest-component-mui
yarn add @mui/material @emotion/react @emotion/styled

Next, let's install a utility library (usehooks) that will be useful later on:

yarn add usehooks-ts

Creating the AutoSuggest Component #

Now, let's create our AutoSuggest component. Inside your project folder, navigate to the `src` directory, create a new folder `components`, and create a new file called `AutoSuggest.tsx`. In this file, we'll define our AutoSuggest component.

"use client";
import {
} from "@mui/material";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useDebounce } from "usehooks-ts";

// define types
type Suggestion = {
  title: string;
  description: string;
  thumbnail?: string;

type SearchResult = {
  products: Suggestion[];

function AutoSuggest() {
  const [query, setQuery] = useState("");
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);

  const [loading, setLoading] = useState(false);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const input =;

  const debouncedQuery = useDebounce(query, 600);

  // logic for fetching suggestions
  useEffect(() => {
    if (!debouncedQuery) {
    // call your backend API for fetching suggestions. We use as an example. For more information, go to:
    ).then(async (res) => {
      const json = (await res.json()) as SearchResult;
  }, [debouncedQuery]);

  return (
      onInputChange={(e) => {}}
      getOptionLabel={(option) => option.title}
      filterOptions={(x) => x} //disable default autocomplete behavior
      renderOption={(props, option) => {
        return (
          <ListItem key={option.title}>
              sx={{ height: 100, width: 100, position: "relative" }}
                style={{ objectFit: "cover" }}
      noOptionsText="Search for something..."
      renderInput={(params) => (

export default AutoSuggest;

In this component, we use React hooks (useState) to manage the component's state (lines #25-28). We also have an input field for typing. This is defined in the renderInput prop (lines 83-91). We also have a list of suggestions that will be displayed as the user types.

In lines 36-52, we also implemented the logic to fetch and filter suggestions based on the user's input. We fetch suggestions from DummyJSON API. We use the useDebounce hook from usehooks-ts, to limit the number of requests sent to the API.

Integrating the AutoSuggest Component #

To use the AutoSuggest component in your application, import it into your desired component and render it. For example:

// /app/page.tsx

import AutoSuggest from "./components/AutoSuggest";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <AutoSuggest />

Conclusion: #

In this tutorial, you learned how to create a basic React AutoSuggest component from scratch. While this example provides a foundation, you can further enhance and customize your AutoSuggest component to suit your specific requirements.

This component can be a valuable addition to your web applications, making them more user-friendly and efficient. Feel free to explore additional features like keyboard navigation, accessibility, and more to make your AutoSuggest component even more robust. Happy coding!

Credits: Image by Peter H from Pixabay

Share this post!

Related Posts