Untitled

import React, { useCallback, useState } from "react";

const debounce = (func, wait) => {
  let timeout;
  return function (...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      timeout = null;
      func.apply(context, args);
    }, wait);
  };
};

function App() {
  const [inputText, setInputText] = useState("");
  const [searchSuggestions, setSearchSuggestions] = useState([]);

  const getSearchResults = async (val) => {
    const response = await fetch("https://api.npms.io/v2/search?q=" + val);
    const data = await response.json();
    setSearchSuggestions(data.results);
  };

  const debounceSearchRequest = useCallback(
    debounce((value) => getSearchResults(value), 1000),
    []
  );

  const onInputChangeHandler = (e) => {
    setInputText(e.target.value);
    debounceSearchRequest(e.target.value);
  };

  return (
    <div
      className="App"
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <label htmlFor="search-input">Search:</label>
      <input
        id="search-input"
        list="searchSuggestions"
        onChange={onInputChangeHandler}
        on
        value={inputText}
      />
      <datalist id="searchSuggestions">
        {searchSuggestions?.map((suggestion, index) => {
          return (
            <option
              value={suggestion.package.name}
              key={"suggestion.package.name" + index}
            ></option>
          );
        })}
      </datalist>
    </div>
  );
}

export default App;