How to access state from callback function

Question

I have a component in react native:

export default class Screen extends Component {
  constructor(props){
    super(props);
    this.state = {
      prop1: false,
      prop2: simpleFunc
    };
  }
  simpleFunc = () => { /*...*/ }

  componentWillMount() {
      BackgroundGeolocation.on('location', this.onLocation);

The last line is callback method that will be called on new location.
From that method I can't access this.state or this.simpleFunc().

What should I do in order to update state from callback function?

Is it because you're using an arrow function? – evolutionxbox Feb 02 '17 at 10:01 — evolutionxbox, Feb 02 '17 at 10:01
On location look like this: `onLocation(location) {` – 1110 Feb 02 '17 at 10:02 — 1110, Feb 02 '17 at 10:02

Davin Tryon · Accepted Answer · 2017-02-02T10:18:30.770

6

In order to access this inside onLocation you need to bind the callback:

  componentWillMount() {
      BackgroundGeolocation.on('location', this.onLocation.bind(this));

or, you can use an arrow function (which will use the lexical scope of the parent):

  componentWillMount() {
      BackgroundGeolocation.on('location', (location) => this.onLocation(location));

edited Feb 02 '17 at 10:18

answered Feb 02 '17 at 10:02

Davin Tryon

66,517
15
143
132

How to access state from callback function

1 Answers1