TypeError: this is undefined on setstate reactjs

Question

can anyone help me or give me solution to get value of

"position.coords.latitude"

i want that value update this.state "city" after user click button

class Home extends Component{

constructor(props){
    super(props)
    this.state = {
        city: '',
        lats : '',
        long : ''
    }
    this.Kirim = this.Kirim.bind(this)
}

Kirim() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(Position){
            this.setState({ city:position.coords.latitude}) // erorr here
        })

      } else { 

      } 
}

render(){
    let {city} = this.state
    console.log(city)
    return(

        <Fragment>
            <div className="form-add">
                <button onClick={this.Kirim}>Kirim</button>
            </div>
        </Fragment>

    )
}

}

You have Position in returned data, but use position in assignment. — alphapilgrim, Jul 30 '19 at 17:48

score 1 · Accepted Answer · edited Jul 31 '19 at 04:35

1

You should use an arrow function () => {} instead of regular function.

When using function, this will be the function's this.

When using arrow function, it will be the component's this, which has setState.

Change

// normal function
navigator.geolocation.getCurrentPosition(function(Position) {
    this.setState({ city:position.coords.latitude}) // error here
})

to

// arrow function 
navigator.geolocation.getCurrentPosition(position => {
      this.setState({ city:position.coords.latitude}) // error here
})

edited Jul 31 '19 at 04:35

marc_s

732,580
175
1,330
1,459

answered Jul 30 '19 at 17:57

Vencovsky

28,550
17
109
176

1

thank you very much... you save my time – wayan wahyu Adi Putra Jul 30 '19 at 18:05
Why down vote if the answer is correct? – Vencovsky Jul 30 '19 at 18:07
i dont know i just want to push correct button.. maybe bug in my pc – wayan wahyu Adi Putra Jul 30 '19 at 18:14

score 0 · Answer 2 · answered Jul 30 '19 at 17:48

0

Change onClick={this.Kirim} to "onClick={() => this.Kirim()}, and position.coords.latitude to Position.coords.latitude. From where do you get navigator?

answered Jul 30 '19 at 17:48

Iiskaandar

394
2
7

sorry my bad... that code is wrong – wayan wahyu Adi Putra Jul 30 '19 at 17:53
He binds the function in the constructor though, so the `onClick={}` shouldn't matter. [`navigator`](https://developer.mozilla.org/de/docs/Web/API/Window/navigator) is a global object. – Turtlefight Jul 30 '19 at 17:57

TypeError: this is undefined on setstate reactjs

2 Answers2