can't map fetched data as an input field autocomplete

Question

I'm trying to capture some suggestions for my input field, i can log them without a problem, but i can't map it and autocomplete on my input type field. trying to understand what i'm doing wrong.

const Lista = () => {
  const [search, setSearch] = useState("");

  useEffect(() => {
    handleSearch();
  }, []);

  async function handleSearch() {
    const response = await fetch("/api/product");
    const search = await response.json();
    setSearch(search);
    console.log(search);
  }

  if (!search) return <p>Loading</p>;

  return (
    <>
      <section>
        <div className="listsContainer">
          <div className="cartContainer">
          <form className="formContainer" onSubmit={handleSubmit}>
            <div className="inputs">
              <div>
                <label>Product</label>
                <input
                  required
                  onChange={(e) => setSearch(e.target.value)}
                />
                <div>
                  {search
                    .filter((item) => {
                      return search.toLowerCase() === ""
                        ? null
                        : item.name.toLowerCase().includes(search);
                    })
                    .map((item) => (
                      <div key={item.id}>
                        <h1>{item.name}</h1>
                      </div>
                    ))}
                </div>

Answer 1

you are mapping 'search' as the response while it contains the user input value. you should add a new locale state for storing the response and then use it for the mapping. you should notice that filter is an Array method and will not work on Json. You should filer Object.values(yourJson). see example bellow:

const Lista = () => {
  const [search, setSearch] = useState("");
  const [productResponse, setproductResponse] = useState({});

  useEffect(() => {
    handleSearch();
  }, []);

  async function handleSearch() {
    const response = await fetch("/api/product");
    const resToJson= await response.json();
    setproductResponse(resToJson);
    console.log(resToJson);
  }

  if (!productResponse) return <p>Loading</p>;

  return (
    <>
      <section>
        <div className="listsContainer">
          <div className="cartContainer">
          <form className="formContainer" onSubmit={handleSubmit}>
            <div className="inputs">
              <div>
                <label>Product</label>
                <input
                  required
                  onChange={(e) => setSearch(e.target.value)}
                />
                <div>
                  {Object.values(productResponse)?.
                    .filter((item) => {
                      return search.toLowerCase() === ""
                        ? null
                        : item.name.toLowerCase().includes(search);
                    })