CODEWITHSUNDEEP
javascriptreactjsreact-nativemapsexpo
Nate.Olson
Nate.Olson

Reputation: 153

Really quick question on how to reference state variables within render() - React Native

I thought this was a simple syntax issue, but maybe it's a larger concept that I don't understand concerning hierarchy and inheritance.

I'm creating an app in react native (expo). I want to display a map focused around the user that consistently updates (I'll end up using watchCurrentPositionAsync, but since I'm new I want to just try gathering location info one time, then figure it out from there). The code below successfully displays the map when raw values are input for latitude and longitude, but I can't seem to pull values from my state object to use in render().

The lines marked with //RIGHT HERE are where I want to use the lat/long values saved in my state object - right now I have them set to constants so that my app functions.

I have tried to replace these constants with:

this.state.initLat_s
this.state[initLat_s]

I've tried creating another structure "regData" and referencing that a number of ways, including referencing it to get all info for initialRegion, including the deltas

I've created "get()" functions both within and outside of state, which threw errors

I've tried creating "global" variables - lat_g for example - with the correct values and referencing them using this.lat_g, lat_g, and a number of other syntaxes, but I simply cannot get the compiler to understand the reference to a state variable from within render.

export default class App extends React.Component {

  state = { //state set
    locationResult: null, //location result holds either location object converted to string or error message as string 
    locationStatus: null, //holds success status of location grab
    initLat_s: null, //holds initial latitude and longitude of user location
    initLon_s: null
  }; 
  
  componentDidMount() {this._getLocationAsync();} //if component mounts, run location grabber
    
  _getLocationAsync = async () => { //location grabber
    let { status } = await Permissions.askAsync(Permissions.LOCATION); //ask for location perms
    if (status !== "granted") { //if location perms denied, set locationResult accordingly
      this.setState({locationResult: "Permission to access location was denied"});
      this.setState({locationStatus: false});
    } else {
      let initLocation = await Location.getCurrentPositionAsync({}); //otherwise, save location object in "location" var
      this.setState({locationResult: JSON.stringify(initLocation)}); //set locationResult to string representation of location
      this.setState({locationStatus: true});

      let {initLat, initLon} = initLocation.coords; //gather lat/lon from location object
      this.setState({initLat_s: initLat}); //set lat/lon in state accordingly
      this.setState({initLon_s: initLon});
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView 
          style={styles.mapStyle}
          initialRegion={{
            latitude: -30,     //RIGHT HERE
            longitude: 120,    //RIGHT HERE
            latitudeDelta: .01,
            longitudeDelta: .01 
          }}
        />
      </View>
    );
  }
}

Upvotes: 0

Views: 546

Answers (2)

guidev
guidev

Reputation: 506

try this and it will work with you.

    // Initial state shouldn't be a **null** because initialRegion.latitude and 
   // initialRegion.longitude are marked as required
    
        state = {
            initLat_s: -30, 
            initLon_s: 120,
          };
        <MapView
                  initialRegion={{
                    latitude: this.state.initLat_s, // Without {}
                    longitude: this.state.initLon_s, // Without {}
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01,
                  }}
                />

Upvotes: 1

Noah Kanyo
Noah Kanyo

Reputation: 550

You can try this approach.

constructor(props) {
    super(props);
    this.state = {
      locationResult: null, //location result holds either location object converted to string or error message as string 
    locationStatus: null, //holds success status of location grab
    initLat_s: null, //holds initial latitude and longitude of user location
    initLon_s: null
    }
  }

Upvotes: 1

Related Questions