that.setState is not a function, inside an independent function

Question

I am getting an error

that.setState is not a function

Still I cannot get it to work.

But mine is an independent function. Also I store the context and use it like :

componentDidMount(){
    that=this;
}

and then

updateResult(item){
    result.push(item);
    that.setState({result: result});
}

I also bind it in the constructor

this.updateResult = this.updateResult.bind(this);       
this.resetResult = this.resetResult.bind(this);

I also tried doing on one function

onUpdate(item, ()=>{
    itemList.push(item);
    that.setState({itemList: itemList});
}.bind(this));

but gives an UnexpectedToken Error!

I do pass it like this

 <Buttons onUpdate={this.onUpdate} />

and then call the function from there, but I am using 'that' for setState.

This is my first application, sorry if there are very obvious mistakes!

Why do you want to store the context? Can't you just use `this` instead of `that`? The use of the `that` pattern is mostly deprecated with es6. — Quentin Roy, Jun 01 '16 at 08:03
And you don't need to bind arrow functions like that! Can you please post the full component for us? — Ilya Lopukhin, Jun 01 '16 at 08:05
@Syberic , my first application, was trying different stuff to somehow get it work :p based on the questions in the stackoverflow as I pointed, I know it's wrong, it gives an error as I mentioned. I still have to learn the right way. — Bhavya Arora, Jun 01 '16 at 08:07
@Roque, I removed it, but doesn't helps unfortunately, still gives the same thing, again, I was just trying different stuff, to get it to work. :( — Bhavya Arora, Jun 01 '16 at 08:08
@BhavyaArora i double the full component request to say what's wrong. — Ilya Lopukhin, Jun 01 '16 at 08:11
@BhavyaArora Before writing any code for the component, declare the variable as `var that = null` (es5 syntax) and it's global. — Leo Napoleon, Jun 01 '16 at 11:25
Can't help without a complete example. What is the value of `that`? — Felix Kling, Jun 01 '16 at 14:24

Michael Rasoahaingo · Accepted Answer · 2016-06-01T12:22:02.750

0

When you write like this

<Buttons onUpdate={this.onUpdate} />

the onUpdate function is bound with window, that's why setState is not defined.

You can do like that

<Buttons onUpdate={this.onUpdate.bind(this)} />

or declare onUpdate like that

updateResult = item => {...}

This arrow function will be bound with this (your class)

edited Jun 01 '16 at 12:22

answered Jun 01 '16 at 11:46

1 Answers1