I don't understand why this is happening when both code are aparently same

Question

this.state = { lat: null };

  window.navigator.geolocation.getCurrentPosition(
    pos=>{
      this.setState({lat:pos.coords.latitude});
    },
    err=>{
      console.log(err);
    }
  );

this is not giving me error but when i'm using setState inside a normal function it's giving me undefined value why? the code which is giving me error :

function success(pos) {
  console.log(pos);
  this.setState({lat:pos.coords.latitude});
}
function error(err) {
  console.log(err);
}
window.navigator.geolocation.getCurrentPosition(success, error);

here's the error TypeError: Cannot read property 'setState' of undefined

[Why would the two be the same?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable) — VLAZ, May 19 '20 at 06:07
yes i know we can not just replace normal functions with arrow functions but i'm trying to do the same thing in both snippet, all i'm trying to do is to update my state inside constructor and the second one where i'm using this.setState is giving me error even though i'm using that inside App class — , May 19 '20 at 06:11
@Subhajit arrow functions inherit the lexical `this`. In the first example, you *do* have access to `this.setState`. In the second example, the normal function does not use the same `this` - in fact, `this` is entirely unset thus, it there is access to `this.setState` — VLAZ, May 19 '20 at 06:15
okay so can we do something so that 'this' inside the normal function decleration point to Component class because if we can point it to Component class then it'll have the access to setState() — , May 19 '20 at 06:24

score 1 · Answer 1 · answered May 19 '20 at 06:15

1

just add this.success=this.success.bind(this) in the constructor of the element and than the this inside the function success will refer to the object.

answered May 19 '20 at 06:15

Igor Lebedisnky

66
3

well this is saying that "Cannot read property 'bind' of undefined" – May 19 '20 at 06:20

score 0 · Answer 2 · answered May 19 '20 at 06:28

0

    class App extends Component {
    constructor(props){
    super(props);
    this.success=this.success.bind(this);
    }
    success(){
    this.setState({lat:pos.coords.latitude});
    }

it should be something like this

answered May 19 '20 at 06:28

Igor Lebedisnky

66
3

I've done something like this `class App extends React.Component { constructor(props) { super(props); this.success=this.success.bind(this); this.state = { lat: null }; function success(pos) { this.setState({lat:pos.coords.latitude}); } function error(err) { console.log(err); } window.navigator.geolocation.getCurrentPosition(success, error);` – May 19 '20 at 06:34

score 0 · Answer 3 · answered May 19 '20 at 07:49

Instead of writing the location fetch in constructor you can use componentWillMount to get the location and set it -

  success=(position)=> {
    this.setState({lat:position.coords.latitude});
  }

  error=(err)=> {
    console.log(err);
  } 

  componentDidMount() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position)=>
        this.success(position));
    }
  }

I don't understand why this is happening when both code are aparently same

3 Answers3