SetState is undefined

Question

Probably doing something stupid, but if anybody can help. I think this is undefined or something. So im trying to use setState and getting the following error.

line 20 Uncaught TypeError: Cannot read property 'setState' of undefined

import React from 'react';

class TimeoutModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      timeLeft: 60,
      timeoutModal: true
    };
  }

  componentDidMount() {
    setInterval(() =>{
      this.setState({ timeLeft: this.state.timeLeft - 1 });
    }, 1000);
  }

  handleClick(e) {
    this.setState({timeoutModal: false});
  }

  render() {
    console.log(this.props.timeoutStatus);
    return (
      <div className="timeout-modal">
        <div className="timeout-modal__container">
          <p>Would you like to continue? {this.state.timeLeft}</p>
          <button onClick={this.handleClick} className="timeout-modal__container-button">Yes</button>
        </div>
      </div>
    );
  }
}

export default TimeoutModal;

Arup Rakshit · Answer 1 · 2018-08-22T11:13:46.713

You need to bind the handleClick event with current component instance. So change the onChange event handler as.

<button onClick={this.handleClick.bind(this)} className="timeout-modal__container-button">Yes</button>

From the doc:

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

Much cleaner when you bind them inside the contructor function and then use them.

constructor(props) {
  super(props);
  this.state = {
    timeLeft: 60,
    timeoutModal: true
  };
  this.handleClick = this.handleClick.bind(this)
}

Write the handler now.

<button onClick={this.handleClick} className="timeout-modal__container-button">Yes</button>

Spot on mate, works perfect. Knew it was something stupid. Mucho gracias (++A) — Adam Dodds, Aug 22 '18 at 11:12
@AdamDodds Please read the link I gave in the post. It will be helpful in future if you read it once from top to bottom. — Arup Rakshit, Aug 22 '18 at 11:15

score 1 · Answer 2 · answered Aug 22 '18 at 11:09

1

  handleClick = (e) => {
    this.setState({timeoutModal: false});
  }

You should use arrow functions to have this working properly inside your function

answered Aug 22 '18 at 11:09

Dinosan0908

1,082
2
8
19

With this approach, u no more need *arrow* function when adding them to handler props. – Arup Rakshit Aug 22 '18 at 11:14
Yes, but the definition of function stays the same and avoids to add a new line in the constructor to bind this. You maybe would like to read that piece of article https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/ch2.md#arrow-functions it explains really well – Dinosan0908 Aug 22 '18 at 11:20
The syntax you wrote is not yet standard. Although everybody using it with babel, even me. I have no problem with this style. What I said, when you write this syntax, no need to write `onClick={() => this.handleClick}` anymore. We can use this style, or the `.bind()` approach. In both we need no more `() => ()` with event handlers. – Arup Rakshit Aug 22 '18 at 11:24
Yes we agree :) – Dinosan0908 Aug 22 '18 at 11:25

SetState is undefined

2 Answers2