React Native: this.setState is not a function

Question

I see a number of questions on here relating to this same issue, but it seems none match the issue I\'m having, and are a bit more complex.

I am in the process of le

Answer 1

The issue is context binding, as identified in the other comments and answers here.

However, the performance of bind itself is a non-issue. The way-more-relevant issue is that using bind or arrows in your render methods creates a new function on each render, resulting in a change of props for the child that receives them, forcing a re-render.

You have two viable options:

class WeatherProject extends Component {
  constructor(props) {
    super(props);

    this._handleTextChange = this._handleTextChange.bind(this);
  }
  // ...
}

Or you can use the class property notation and assign arrow functions if you're using the babel plugin for it.

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    // ...
  }

  handleTextChange = (event) => {
    this.setState({zip: event.nativeEvent.text});
  }
  // ...
}

I strongly recommend you use the eslint package with the react recommended rules enabled. It will catch errors like using bind/arrows in your render, as well as tell you that underscore prefixed functions are ugly and totally not necessary in React. :)