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

Other Questions RapidAPI
1

Issue with null property access in Maps API integration

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

Working version (hardcoded coordinates):

api/services.js

import axios from 'axios';

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

const config = {
  params: {
    bl_latitude: '10.123456',
    tr_latitude: '11.987654', 
    bl_longitude: '108.555555',
    tr_longitude: '109.777777',
  },
  headers: {
    'x-rapidapi-host': 'travel-advisor.p.rapidapi.com',
    'x-rapidapi-key': 'my-api-key',
  },
};

export const fetchRestaurants = async () => {
  try {
    const response = await axios.get(ENDPOINT, config);
    return response.data.data;
  } catch (err) {
    console.error(err);
  }
};

Main.js

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

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

Broken version (dynamic coordinates):

api/services.js

export const fetchRestaurants = async (southwest, northeast) => {
  try {
    const response = await axios.get(ENDPOINT, {
      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-api-key',
      },
    });
    return response.data.data;
  } catch (err) {
    console.error(err);
  }
};

Main.js

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

useEffect(() => {
  fetchRestaurants(mapBounds.sw, mapBounds.ne).then((result) => {
    setRestaurants(result);
  });
}, [coordinates, mapBounds]);

The error happens right after switching to the dynamic approach. I think the issue is related to timing but I can’t figure out exactly what’s going wrong. Any ideas what might be causing this?

2

You’ve got a classic race condition here. When your component mounts, mapBounds starts as null, but your second useEffect fires right away and tries to access mapBounds.sw before the map has set the bounds. I ran into this exact issue last year. Just add a null check before calling your API: useEffect(() => { if (mapBounds && mapBounds.sw && mapBounds.ne) { fetchRestaurants(mapBounds.sw, mapBounds.ne).then((result) => { setRestaurants(result); }); } }, [coordinates, mapBounds]); This stops the function from running until the map bounds are actually set. Google Maps needs time to calculate the viewport bounds after the map loads - it’s async. Without the check, you’re passing undefined values to your API.

3

Same issue here! Just add if (!mapBounds) return; at the start of your useEffect. Stops the code from running until mapBounds is actually set. Should fix that null error!

4

The problem is that coordinates is in your useEffect dependency array, so the effect runs right when geolocation updates the coordinates. This means you’re trying to access mapBounds.sw before the Google Maps component has actually set it. I ran into this same issue recently. Just change your dependency array for the restaurant fetching effect to only include mapBounds. That way the fetch only happens when map bounds are actually ready. The map will still adjust its bounds when coordinates update.