How to store value from callback function in react state? (Google Maps)

Question

I am trying to store the value from a callback function in the state in React, but keep having errors.

I am using @react-google-maps/api and want to store the geoJson in the state, so in my code I am trying to get access to 'obj' and make usable outside the callback.

This is my code...

getGeoJson = (map, maps) => {

    //toGeoJson() takes a callback
    map.data.toGeoJson(function(obj){
        return obj
    });

    //Trying to store in state like this...
    this.setState({
        value: obj
    });
};

References .toGeoJson()

Answer 1

You need to set value in the callback. Here, the arrow function is important because you can keep context without binding.

getGeoJson = (map, maps) => {
    map.data.toGeoJson((obj) => {
        this.setState({
            value: obj
        });
    });
};

Answer 2

The variable obj is function scoped, you are trying to set it's value outside the callback function, which is the reason the value is probably being set to undefined or null or something among those lines.

You will need to store the obj variable into state inside the callback function. Like this:

 getGeoJson = (map, maps) => {
    //toGeoJson() takes a callback
    map.data.toGeoJson(obj => {
        return obj
    this.setState({
        value: obj
    });
    });
};

However, for some reason if you do not want to set it's value within the callback function, you can return the value of obj from the callback function, but you also need to capture the returned value into another variable before you can store it in the state, like so:

 getGeoJson = (map, maps) => {
//toGeoJson() takes a callback
   const object = map.data.toGeoJson(function(obj){
        return obj
    });

   this.setState({
        value: object
    });
};