react-native - can't access setState inside component function

Question

I'm learning react-native and now I'm stucked on state lesson with this error:

_this2.setState is not a function.

Here's the current block of code.

...
export default class StopWatch extends Component {

  constructor(props){
    super(props);
    this.state = {
      timeElapsed: null
    }
  }

  handleStartStopClick(){
    var startTime = new Date();

    setInterval(() => {
      this.setState(previousState => {
        return {timeElapsed:new Date() - startTime};
      });
    }, 100);
  }
...

What am I doing wrong?

Moti Azu · Accepted Answer · 2017-07-13 13:37:22Z

9

handleStartStopClick is called from a context where this is not your class's instance. You can avoid that by adding .bind(this) to the function you are passing as your click handler.

<TouchableHighlight onPress={this.handleStartStopClick.bind(this)}>

answered Jul 13, 2017 at 13:37

Moti Azu

5,4521 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anderlaini Over a year ago

it worked! I was missing the bind(this) block! thank you!

Antoine Grandchamp Over a year ago

Adding to this, I would recommend you to bind your function in your constructor instead of in onPress. Otherwise, you will bind your function each time the component is re-render and it can result in performance decrease.

Moti Azu Over a year ago

@AntoineGrandchamp Definitely, this is the performant way to do it

Voi Mập · Accepted Answer · 2017-07-13 13:43:15Z

3

Try this :

 this.setState({timeElapsed : (new Date() - startTime)})

You must defined your function in constructor with bind(this) or

handleStartStopClick = () => {...}

edited Jul 13, 2017 at 13:43

answered Jul 13, 2017 at 13:36

Voi Mập

8193 gold badges9 silver badges23 bronze badges

4 Comments

Yury Tarabanko Over a year ago

How would using deprecated version of setState help?

Voi Mập Over a year ago

I think ,Problem is setState is not function, also it sets one State to another State. Like this: this.setState( state : value you want set )

Yury Tarabanko Over a year ago

Yes. the problem is that handleStartStopClick is being called without binding thus having wrong context. So your answer not only doesn't help but promotes deprecated API.

Voi Mập Over a year ago

Okay thank @YuryTarabanko . I have fixed my answer ^^. We can use bind(this) or use direct arrow function in ES 6

Collectives™ on Stack Overflow

react-native - can't access setState inside component function

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related