Value Won't Change Until After The Second Button Press

I have a button that changes increases the value of an object.

Solution 1:

The setState method has an optional 2nd argumnet that is a callback function to be executed after the setState has been executed and render was called.

voidsetState(
  function|object nextState,
  [function callback]
)

In your code you handleClick method assumes that setState has been executed and the valaues updated. But there is no guarantee that this is always true. If you provide your handleCLick method as the callBack to setState this can be ensured.

addKoala: function() {
  this.setState({
    towelCount: this.state.towelCount - 2,
    koalaCount: this.state.koalaCount + 2
  },  this.handleClick("Koala").bind(this);
}