Undefined is not an object evaluating this.state/this.props

Question

How do I bind a function outside of scope in React Native? I\'m getting the errors:

undefined is not an object evaluating this.state   

&

Answer 1

You are going in the right direction, but there is still a minor issue. You are passing a function to your map callback that has a different scope (this) than your component (because it is not an arrow function), so when you do bind(this), you are rebinding your callback to use the scope from map. I think this should work, it basically turns the callback that you pass to map into an arrow function. Also, since you bind your function in the constructor, you do not need to do it again:

  // The constructor logic remains the same
  // ....
  renderLoadingView() {
      return (
      
        
          Loading ...
        
      
      )
    }

  _buttonPress = () =>  {
      this.props.navigator.push({
        id: 'Main'
      })
  }

  renderGPSDataFromServer =() => {

    const {loaded} = this.state;
    const {state} = this.state;

    return this.state.dataArr.map((data, i) => {
      return(
        

          
            
            View Video
            
          

          
            {i}
            
              
              {Number(data.lat).toFixed(2)}
              {Number(data.long).toFixed(2)}
            
            
            {this.calcRow(55,55).bind(this)}
            
          

        
      );
    });
  }

  render = ()=> {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return(
      
        {this.renderGPSDataFromServer()}
      
    )
  }};