Setting state with a function in another file

Question

Without attempting to update my state, the initial location in state is presented correctly. When I set state using a helper function, nothing is displayed in my app. What am I doing wrong? Additionally, logging props inside ShowLocation's render() shows that the coords{lat:xx,long:xx} are coming through correctly.

App.js

import * as helpers from './src/helpers';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = globals.initial_state;
  }

  componentDidMount(){
    this.setState({location:helpers.getLocation()});
  }

  render() {
    return (
      <View>
        <ShowLocation coords={this.state.location} />
      </View>
    );
  }
}

ShowLocation.js

class ShowLocation extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return(
            <View>
                <Text>{this.props.coords.lat}, {this.props.coords.long}</Text>
            </View>
        )
    }
};

helpers.getLocation:

export function getLocation(){
    coords = {};
    navigator.geolocation.getCurrentPosition(
        (position) => {
            coords['lat'] = position.coords.latitude
            coords['long'] = position.coords.longitude
        },
        (error) => this.setState({ navigatorError: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
    return coords;
}

Possible duplicate of [How to return value from an asynchronous callback function?](https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function) — bennygenel, Jul 13 '18 at 14:01

Poptocrack · Answer 1 · 2018-07-13T15:25:30.553

-1

Did you tried:

componentDidMount(){
  this.setState({ location: getLocation().bind(this) });
}

Or, same thing, but cleaner code:

constructor() {
  // other stuff
  this.getLocation = getLocation().bind(this)
}

componentDidMount(){
  this.setState({ location: this.getLocation() });
}

Edit:

You must import { getLocation} from 'path/of/file'

edited Jul 13 '18 at 15:25

answered Jul 13 '18 at 14:50

Poptocrack

2,879
1
12
28

`helpers.getLocation(...).bind is not a function` – smilebomb Jul 13 '18 at 15:20
Edited answer. You must import correctly your function. I was using the helps object you provided in your question – Poptocrack Jul 13 '18 at 15:26
I have done that. I updated `App.js` in my question. – smilebomb Jul 13 '18 at 15:27

Setting state with a function in another file

1 Answers1