How can I make a search box in react-hooks?

Question

I'm making a cocktail recipe web. If I search for the name of the cocktail, I want the cocktail to appear. The error message shown to me is as follows. "TypeError: Cannot read property 'filter' of undefined"

Please tell me how to solve this problem. I'm a beginner. Is there a problem with my code? This is Search.jsx

import React, { useState, useEffect } from "react";
import useFetch from "../Components/useFetch";

const Searchs = () => {
  const url =
    "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
  const [data] = useFetch(url);
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState([]);

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };
  useEffect(() => {
    const results = data.drinks.filter(({ strDrink }) =>
      data.strDrink.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);
  return (
    <Wrapper>
      <Search
        type="text"
        placeholder="재료 또는 이름을 검색하세요"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </Wrapper>
  );
};
export default Searchs;

This is useFetch.jsx

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, []);
  return [data, loading];
}
export default useFetch;

This is JSON

{
  "drinks": [
    {
      "idDrink": "12784",
      "strDrink": "Thai Iced Coffee",
      "strCategory": "Coffee / Tea",
      "strIBA": null,
      "strAlcoholic": "Non alcoholic",
      "strGlass": "Highball glass",
      "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/rqpypv1441245650.jpg",
      "strIngredient1": "Coffee",
      "strIngredient2": "Sugar",
      "strIngredient3": "Cream",
      "strIngredient4": "Cardamom",
      "strMeasure1": "black",
      "strMeasure3": " pods\n",
      "strImageAttribution": null,
      "strCreativeCommonsConfirmed": "No",
      "dateModified": "2015-09-03 03:00:50"
    }
  ]
}

Answer 1

It seems like your API is returning nothing. You should add a check to see if anything is returned from API:

ALSO: you have to include data which you get from useFetch to the useEffect dependencies, otherwise it's value won't be changed in each useEffect call:

useEffect(() => {
    const results = data?.drinks?.filter(({ strDrink }) =>
        data.strDrink.toLowerCase().includes(searchTerm)
    ) ?? [];
    setSearchResults(results);
}, [searchTerm, data]);

Answer 2

you did many mistakes in this code look below how I did it

here you can find sandbox URL where you can see live working code

https://codesandbox.io/s/boring-tesla-hoc11?file=/src/App.js:75-1141

I have changed your wrapper to input element for testing you can revert it back

const Searchs = () => {
  const url =
    "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";

  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };
  useEffect(() => {
    async function fetchUrl() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
      setLoading(false);
      const results = data.drinks.filter(({ strDrink }) =>
        strDrink.toLowerCase().includes(searchTerm)
      );
      setSearchResults(results);
    }
    fetchUrl();
  }, [searchTerm]);
  return (
    <> 
      <input 
        type="text"
        placeholder="재료 또는 이름을 검색하세요"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map((item,index) => (
          <li key={index}>{item.strDrink}</li>
        ))}
      </ul>
    </>
  );
};

Answer 3

Do null check before filter(), Your API might return null/undefined you should handle such cases.

Bonus: onChange={handleChange} don't directly call API on change, add some denounce check, to improve performance.

useEffect(() => {
    const results = data?.drinks?.filter(({ strDrink }) =>
        data.strDrink.toLowerCase().includes(searchTerm)
    ) ?? [];
    setSearchResults(results);
}, [searchTerm]);