I am making an application where the user can search for drinks, click on them and find information about them. However, when I click on them I get the error message: Uncaught TypeError: storedDrinks.find is not a function

at findDrink (useFindDrink.ts?t=1719246620191:9:32)
at handleNavigation (Drink.tsx?t=1719239230949:27:5)
at HTMLUnknownElement.callCallback2 (chunk-C4BO3AWI.js?v=cd54f277:3672:22)
at Object.invokeGuardedCallbackDev (chunk-C4BO3AWI.js?v=cd54f277:3697:24)
at invokeGuardedCallback (chunk-C4BO3AWI.js?v=cd54f277:3731:39)
at invokeGuardedCallbackAndCatchFirstError (chunk-C4BO3AWI.js?v=cd54f277:3734:33)
at executeDispatch (chunk-C4BO3AWI.js?v=cd54f277:7014:11)
at processDispatchQueueItemsInOrder (chunk-C4BO3AWI.js?v=cd54f277:7034:15)
at processDispatchQueue (chunk-C4BO3AWI.js?v=cd54f277:7043:13)
at dispatchEventsForPlugins (chunk-C4BO3AWI.js?v=cd54f277:7051:11). 

I created this hook to find a drink by an id (and yes, the id is indeed a string in the API and not a number). I also logged the drinks in my localstorage and the data is an array of drink objects. I read about this issue and it seems like it happens when the expected data is not an array. But this is an array… or at least im sure of it.

import { useState } from "react";
import { IDrink } from "../models/IDrink";

export const useFindDrink = () => {
  const storedDrinks = JSON.parse(
    localStorage.getItem("storedDrinks") || "{}"
  ) as IDrink[];
  const [foundDrink, setFoundDrink] = useState<IDrink | undefined>();

  console.log("Stored Drinks:", storedDrinks);

  const findDrink = (id: string) => {
    const drink = storedDrinks.find((d: IDrink) => d.idDrink === id);

    if (drink !== undefined) {
      setFoundDrink(drink);
      console.log("Found drink:", drink);
    }
  };

  return { findDrink, foundDrink };
};

Here is where I store the drinks to localstorage:

import { useState } from "react";
import { IDrink } from "../models/IDrink";
import { getDrinks } from "../services/drinkService";
import { SearchForm } from "../components/SearchForm";
import { Drinks } from "../components/Drinks";
import { useDrink } from "../hooks/useDrink";
import { useFindDrink } from "../hooks/useFindDrink";

export const DrinksPage = () => {
  const { addDrinks } = useDrink();
  const { findDrink } = useFindDrink();
  const [loading, setLoading] = useState(false);
  const [submit, setSubmit] = useState(false);
  const [drinks, setDrinks] = useState<IDrink[]>([]);

  const getAllDrinks = async (text: string) => {
    try {
      setLoading(true);
      setSubmit(true);

      const drinkData = JSON.parse(
        localStorage.getItem("storedDrinks") || "{}"
      ) as IDrink[];
      console.log("Stored Drinks JSON:", drinkData);

      if (drinkData.length > 0) {
        console.log("Got drinks from localStorage:", drinkData.length);
      } else {
        const response = await getDrinks(text);

        setDrinks(response.drinks || []);
        localStorage.setItem("storedDrinks", JSON.stringify(response));
        console.log("Fetched drinks successfully:", response.drinks);
      }
    } catch (error) {
      console.error("Error fetching drinks:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <SearchForm searchDrinks={getAllDrinks}></SearchForm>
      {loading && submit && <div>Loading...</div>}
      {!loading && drinks.length === 0 && submit && <p>No drinks found.</p>}
      <Drinks
        drinks={drinks}
        addDrink={addDrinks}
        findDrink={findDrink}
      ></Drinks>
    </>
  );
};

I’ve logged and googled this issue for hours and I feel totally clueless to what the issue is. I would appreciate someone explaining what the issue might be 🙂 . Thanks in advance!!!