this.state is undefined when used in function React JS component

Question

I have the React component below and I want to access this.state.board (a 2D array with 0 or 1 for each element) from a function randomPosition(). When I call randomPosition it returns "cannot read property state of undefined". Am I doing something wrong with the this keyword?

var App = React.createClass({

getInitialState(){

  return {

   board: []

}

},

randomPosition: function(){
//generates a random position on this.state.board array

  var position = [];
  var positionX = null;
  var positionY = null;

  var generatePosition = function(){

    positionX = Math.floor(Math.random() * 64);
    positionY = Math.floor(Math.random() * 64);

    if(this.state.board[positionX][positionY] === 1){

      position.push(positionX, positionY);
      return position;

    } else {

      generatePosition();

    }

  }

  generatePosition();

}


})

thanks for the help!

Ok thanks Felix, let me have a look at that link – chemook78 Jan 05 '17 at 04:46 — chemook78, Jan 05 '17 at 04:46

score 1 · Accepted Answer · answered Jan 05 '17 at 05:07

1

Your generatePosition function will have its own scope and hence this inside this function will point to its own scope rather than the outer scope where state is accessible. You can store the reference of the outer scope and then use that inside this function like

randomPosition: function(){
//generates a random position on this.state.board array

  var position = [];
  var positionX = null;
  var positionY = null;
  var that = this;
  var generatePosition = function(){

    positionX = Math.floor(Math.random() * 64);
    positionY = Math.floor(Math.random() * 64);

    if(that.state.board[positionX][positionY] === 1){

      position.push(positionX, positionY);
      return position;

    } else {

      generatePosition();

    }

  }

answered Jan 05 '17 at 05:07

Shubham Khatri

211,155
45
305
318

While `this` and scope are related, it's incorrect to say that `this` *is* scope. – Felix Kling Jan 05 '17 at 05:20
What I said is that `this` will point to the scope of the function, it doesn't mean that `this` is scope – Shubham Khatri Jan 05 '17 at 05:22
But that also wrong. "Scope" is not something that can be referenced or pointed to in JavaScript. – Felix Kling Jan 05 '17 at 05:24
@FelixKling I am running out of words to explain it, could you edit the answer. – Shubham Khatri Jan 05 '17 at 05:28

this.state is undefined when used in function React JS component

1 Answers1