React Hooks - Invalid Hook Call - reactjs

Question

I am getting an error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
This is my hook useParking:
import { Strings } from "..";
import { get } from "../HTTPProvider";
import { Lot } from ".";
import { Moment } from "moment";
import L from "leaflet";
interface ApiResponse {
id: string;
fields: Lot;
createdTime: Moment | string;
}
const { apiUrl, apiKey } = Strings;
const [error, setError] = useState(false);
const getParkingLots = (setParkingLots: (l: Lot[]) => void) => {
get<{ records: ApiResponse[] }>(`${apiUrl}Parking%20Lots`, { apiKey })
.then((response) => {
console.log(response);
const data: Lot[] = [];
response.data.records.forEach((record) => {
const lat = record.fields.latitude;
const lon = record.fields.longitude;
if (lat && lon) record.fields.coordinates = L.latLng([lat, lon]);
data.push(record.fields);
});
setParkingLots(data);
})
.catch((error) => setError(error));
console.log(error);
};
export const useParkingLot = (): Lot[] => {
const [parkingLots, setParkingLots] = useState<Lot[]>([]);
useEffect(() => {
getParkingLots(setParkingLots);
}, [parkingLots]);
return parkingLots;
};
I am trying to use the hook in my MainTabs component here:
import {
IonTabs,
IonTabBar,
IonTabButton,
IonIcon,
IonLabel,
IonRouterOutlet,
} from "#ionic/react";
import { map, business, calendarOutline, carOutline } from "ionicons/icons";
import { Route, Redirect } from "react-router";
import { CampusMap, Events, Buildings, ParkingLots } from "../../pages";
import { useFakeEvent } from "../../DataProviders";
import { useBuilding } from "../../DataProviders";
import { useParkingLot } from "../../DataProviders";
export const MainTabs: React.FC = () => {
const buildings = useBuilding();
const parkingLots = useParkingLot();
const [events, setEvents] = useState(useFakeEvent());
const [showName, setShowName] = useState(true);
const toggleName = () => {
console.log("resetName called");
setShowName(false);
return setTimeout(() => {
setShowName(true);
});
};
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/:tab(Events)" render={() => <Events />} exact={true} />
<Route
path="/:tab(Map)"
render={() => (
<CampusMap
buildings={buildings}
showName={showName}
parkingLots={parkingLots}
events={events}
/>
)}
exact={true}
/>
<Route
path="/:tab(BuildingList)"
render={() => <Buildings buildings={buildings} />}
exact={true}
/>
<Route
path="/:tab(ParkingLotList)"
render={() => <ParkingLots parkingLots={parkingLots} />}
exact={true}
/>
<Route exact path="/" render={() => <Redirect to="/Map" />} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="Map" href="/Map" onClick={toggleName}>
<IonIcon icon={map} />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="BuildingList" href="/BuildingList">
<IonIcon icon={business} />
<IonLabel>Buildings</IonLabel>
</IonTabButton>
<IonTabButton tab="Events" href="/Events">
<IonIcon icon={calendarOutline} />
<IonLabel>Events</IonLabel>
</IonTabButton>
<IonTabButton tab="ParkingList" href="/ParkingLotList">
<IonIcon icon={carOutline} />
<IonLabel>Parking Lots</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
I have checked my code against the Rules of Hook documentation and it doesn't seem like I am breaking any. I have also checked my dependencies and they all check out. So I'm not sure why I'm getting the error. Can anyone see what I am doing wrong here?

Answer 1

Use useState inside getParkingLots function because you defined useState outside of functional component which causes Invalid Hook Call. Try initializing inside like
const getParkingLots = (setParkingLots: (l: Lot[]) => void) => {
const [error, setError] = useState(false); // here
get<{ records: ApiResponse[] }>(`${apiUrl}Parking%20Lots`, { apiKey })
.then((response) => {
....
})
.catch((error) => setError(error));
console.log(error);
};

Answer 2

The const [error, setError] = useState(false); needs to be within a functional component body or custom hook. – Drew Reese
This fixed the error.