TypeError: Cannot read properties of null (reading 'sw') using google-maps api and rapidapi

Question

I am facing this error while using google-maps api and and another api from rapidapi.

First this is the code that works:

API -> index.js

import axios from "axios";

const URL =
  "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";
// code snippet from "https://rapidapi.com/apidojo/api/travel-advisor/"

const options = {
  params: {
    // bl_latitude: sw.lat,
    // bl_longitude: sw.lng,
    // tr_longitude: ne.lng,
    // tr_latitude: ne.lat,
    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": "key",
  },
};

export const getPlacesData = async () => {
  try {
    const {
      data: { data },
    } = await axios.get(URL, options);

    return data;
  } catch (error) {
    console.log(error);
  }
};

App.js (giving only difference)

const [bounds, setBounds] = useState(null);

const [places, setPlaces] = useState([]);

useEffect(() => {
    getPlacesData().then((data) => {
      // console.log(data);
      setPlaces(data);
    });
  }, []);

Code that is giving errors:

API -> index.js

import axios from "axios";

const URL =
  "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";
// code snippet from "https://rapidapi.com/apidojo/api/travel-advisor/"

export const getPlacesData = async (sw, ne) => {
  try {
    const {
      data: { data },
    } = await axios.get(URL, {
      params: {
        bl_latitude: sw.lat,
        bl_longitude: sw.lng,
        tr_longitude: ne.lng,
        tr_latitude: ne.lat,
        // 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": "key",
      },
    });

    return data;
  } catch (error) {
    console.log(error);
  }
};

App.js

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

  useEffect(() => {
    getPlacesData(bounds.sw, bounds.ne).then((data) => {
      console.log(data);
      setPlaces(data);
    });
  }, [coordinates, bounds]);

Just after this change it started giving this error

I have tried my level best bust i am unable to find what is wrong with the code. I used git to can see the difference.

Answer 1

I was having the same problem. You'll need to pass an empty object instead of "null"

const [bounds, setBounds] = useState(null);

This is your current code ^

const [bounds, setBounds] = useState({});

This will make your code work ^

Answer 2

Your code is a bit unclear, and I can help if you provide your question more concisely with less code as possible.

But the one thing I can say here is that you declared the bounds variable as null having no property, so how can you access the sw property of bounds because it's not available at all.

Also, you're not using setBounds method to set the bounds variable. Am I missing something? Try something like this:

const [bounds, setBounds] = useState({ sw: 0, ne: 0});

Answer 3

Add the optional chaining operator to getPlacesData in App.js

getPlacesData(bounds?.sw, bounds?.ne)
    .then((data) =>{
        setPlaces(data);
    });