Getting null property error when accessing 'sw' with Google Maps API and RapidAPI integration

Other Questions RapidAPI
1

I’m running into a problem where I get an error about trying to read property ‘sw’ from null when working with Google Maps and a RapidAPI service.

This version works fine with hardcoded values:

import axios from "axios";

const API_URL = "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";

const requestConfig = {
  params: {
    bl_latitude: "11.847676",
    tr_latitude: "12.838442", 
    bl_longitude: "109.095887",
    tr_longitude: "109.149359",
  },
  headers: {
    "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
    "x-rapidapi-key": "my-key",
  },
};

export const fetchRestaurantData = async () => {
  try {
    const response = await axios.get(API_URL, requestConfig);
    return response.data.data;
  } catch (err) {
    console.log(err);
  }
};

In my component:

const [mapBounds, setMapBounds] = useState(null);
const [restaurants, setRestaurants] = useState([]);

useEffect(() => {
  fetchRestaurantData().then((result) => {
    setRestaurants(result);
  });
}, []);

But when I try to pass dynamic boundary parameters, it breaks:

export const fetchRestaurantData = async (southwest, northeast) => {
  try {
    const response = await axios.get(API_URL, {
      params: {
        bl_latitude: southwest.lat,
        bl_longitude: southwest.lng,
        tr_longitude: northeast.lng,
        tr_latitude: northeast.lat,
      },
      headers: {
        "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
        "x-rapidapi-key": "my-key",
      },
    });
    return response.data.data;
  } catch (err) {
    console.log(err);
  }
};

And in the component:

useEffect(() => {
  navigator.geolocation.getCurrentPosition(
    ({ coords: { latitude, longitude } }) => {
      setCurrentLocation({ lat: latitude, lng: longitude });
    }
  );
}, []);

useEffect(() => {
  fetchRestaurantData(mapBounds.southwest, mapBounds.northeast).then((result) => {
    setRestaurants(result);
  });
}, [currentLocation, mapBounds]);

The error happens right after making this change. I think the issue is that mapBounds is null when the effect runs, but I can’t figure out the right way to fix this timing problem.

2

This timing issue happens all the time with async operations. Your mapBounds starts as null and stays that way until Google Maps actually loads and sets the bounds. When useEffect runs, it’s trying to access mapBounds.southwest before mapBounds gets populated. Just add a null check before calling your API: javascript useEffect(() => { if (mapBounds && mapBounds.southwest && mapBounds.northeast) { fetchRestaurantData(mapBounds.southwest, mapBounds.northeast).then((result) => { setRestaurants(result); }); } }, [currentLocation, mapBounds]); This way the API only fires when mapBounds actually has boundary data. I’ve hit this same Google Maps issue before - waiting for all the required data to load before making the API call always fixes those null property errors.

3

Your useEffect is breaking because mapBounds is null on the first render. I’ve hit this same issue when mixing Google Maps with external APIs. Don’t just add null checks - restructure the logic to be more defensive. Make your fetchRestaurantData function handle undefined parameters by returning early or using fallback coordinates. Or initialize mapBounds with a default boundary around the user’s location once getCurrentPosition resolves. This stops the null reference error and makes your API calls predictable. The real issue is that Google Maps bounds and geolocation are both async, so you need to coordinate their timing instead of hoping they resolve in the right order.

4

Classic React timing issue. mapBounds is null on first render, so when useEffect tries to destructure it - boom, error. Add a guard clause like if (!mapBounds) return; before your fetchRestaurantData call. You could set initial state to an empty object instead of null, but the check’s cleaner.