React: 'this.state' is undefined inside a component function

Question

I'm having trouble accessing this.state in functions inside my component. I already found this question on SO and added the suggested code to my constructor:

class Game extends React.Component {

  constructor(props){
    super(props);
    ...
    this.state = {uid: '', currentTable : '', currentRound : 10, deck : sortedDeck};
    this.dealNewHand = this.dealNewHand.bind(this);
    this.getCardsForRound = this.getCardsForRound.bind(this);
    this.shuffle = this.shuffle.bind(this);
  }

  // error thrown in this function
  dealNewHand(){
    var allCardsForThisRound = this.getCardsForRound(this.state.currentRound); 
  }

  getCardsForRound(cardsPerPerson){
    var shuffledDeck = this.shuffle(sortedDeck);
    var cardsForThisRound = [];
    for(var i = 0; i < cardsPerPerson * 4; i++){
      cardsForThisRound.push(shuffledDeck[i]);
    }
    return cardsForThisRound;
  }

  shuffle(array) {
    ...
  }

  ...
  ...

It still does not work. this.state.currentRound is undefined. What is the problem?

cant really tell whats going on from this, it looks fine. Can you upload this into a js fiddle? — omarjmh, May 11 '16 at 14:09
base fiddle for es6 and react: https://jsfiddle.net/jhonvolkd/nrd015dm/ — omarjmh, May 11 '16 at 14:13
Nothing happened when I pressed 'run'. I edited the question with my full component anyway — hellogoodnight, May 11 '16 at 14:17
ok there we go, this is an async prob, I'm sure you'll get an answer soon now — omarjmh, May 11 '16 at 14:21
A couple recommendations: 1) Use fat arrow functions (`() => `) instead of `function` and `self`. 2) Don't mutate state (`newState = this.state; newState.currentRount = gameData.currentRound; this.setState(newState)`, instead pass state changes as `setState({currentRound: gameData.currentRound})` — Aaron Beall, May 11 '16 at 15:40

score 5 · Accepted Answer · answered May 11 '16 at 20:53

5

I came up with something that worked. I changed the code for binding getCardsForRound in the constructor to:

this.getCardsForRound = this.getCardsForRound.bind(this, this.state.currentRound);

answered May 11 '16 at 20:53

hellogoodnight

1,989
7
29
57

score 0 · Answer 2 · answered Dec 04 '17 at 11:10

Write your functions this way:

dealNewHand = () => {
    var allCardsForThisRound = 
    this.getCardsForRound(this.state.currentRound);
}
getCardsForRound = (cardsPerPerson) => {
    var shuffledDeck = this.shuffle(sortedDeck);
    var cardsForThisRound = [];
    for(var i = 0; i < cardsPerPerson * 4; i++){
        cardsForThisRound.push(shuffledDeck[i]);
    }
    return cardsForThisRound;
}

http://www.react.express/fat_arrow_functions

the binding for the keyword this is the same outside and inside the fat arrow function. This is different than functions declared with function, which can bind this to another object upon invocation. Maintaining the this binding is very convenient for operations like mapping: this.items.map(x => this.doSomethingWith(x)).

React: 'this.state' is undefined inside a component function

2 Answers2