Cannot read property 'setState' of undefined ReactJS

Question

I am trying to set the state in React inside my function, however I get an error message stating: Cannot read property 'setState' of undefined.

Below is my code, I call the state in the constructor then I am setting the state in the addTimes function and binding this to that function, however I am still getting the error.

class Settings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      times: []
    };

  }
  render(){
    Array.prototype.remove = function() {
        var what, a = arguments, L = a.length, ax;
        while (L && this.length) {
            what = a[--L];
            while ((ax = this.indexOf(what)) !== -1) {
                this.splice(ax, 1);
            }
        }
        return this;
    };

    var currentTicked = [];
    var times =[]
    function addTimes(id){
      var index = times.indexOf(id);
      if (!times.includes(id)) {
        $("input:checkbox[name=time]:checked").each(function(){
          currentTicked.push($(this).val());
          times = times.concat(currentTicked)
          times = jQuery.unique(times);
        });
      } else if(times.includes(id)){
        times.remove(id)
      }
      console.log(times);
      addTimes = () => {
        this.setState({
          times: times
        });
      }
    }

this is strange to me ` addTimes = () => { this.setState({ times: times }); }` . why don't just put ` this.setState({ times: times });` — AlainIb
– AlainIb, Commented Jul 9, 2018 at 8:54
Also why redefining the function remove in the Array's protoype on each render? — sjahan
– sjahan, Commented Jul 9, 2018 at 8:59

Mr React · Accepted Answer · 2018-07-09 09:43:19Z

1

you haven't bound the function to the class. try doing

addTimes = (id) => {
  // code here
}

in the component class

answered Jul 9, 2018 at 9:43

Mr React

211 silver badge5 bronze badges

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

Comments

Emmanuel RICHE · Accepted Answer · 2018-07-09 08:57:33Z

0

Try with an arrow function:

addTimes = id => {
      var index = times.indexOf(id);
      if (!times.includes(id)) {
        $("input:checkbox[name=time]:checked").each(function(){
          currentTicked.push($(this).val());
          times = times.concat(currentTicked)
          times = jQuery.unique(times);
        });
      } else if(times.includes(id)){
        times.remove(id)
      }
      console.log(times);
      addTimes = () => {
        this.setState({
          times: times
        });
      }
    }

Or, bind thisin addTimesfunction like this :

constructor(props) {
    super(props);
    this.state = {
      times: []
      this.addTimes = this.addTimes.bind(this);
    };

  }

edited Jul 9, 2018 at 8:57

answered Jul 9, 2018 at 8:52

Emmanuel RICHE

1734 bronze badges

Comments

vishnusaran · Accepted Answer · 2018-07-09 09:33:16Z

better to use es6 syntax. try with below code.

 class Settings extends React.Component {
    constructor(props) {
     super(props);
     this.state = {
       times: []
      };

    let times = [];
    let currentTicked = [];
    this.addTimes = this.addTimes.bind(this);
    }
     addTimes(id) {
        let index = times.indexOf(id);
        if (!times.includes(id)) {
            $("input:checkbox[name=time]:checked").each(function(){
              currentTicked.push($(this).val());
              times = times.concat(currentTicked)
              times = jQuery.unique(times);
            });
          } else if(times.includes(id)){
            times.remove(id)
          }
          this.setState({
            times: times
          });
    }
    render(){
    this.addTimes;
    return (
        Array.prototype.remove = function() {
            var what, a = arguments, L = a.length, ax;
            while (L && this.length) {
                what = a[--L];
                while ((ax = this.indexOf(what)) !== -1) {
                    this.splice(ax, 1);
                }
            }
            return this;
        }
    );
    }
}

Collectives™ on Stack Overflow

Cannot read property 'setState' of undefined ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related