JS React: error of this.x is not a function, even when this.x function is bound

Question

I'm trying to update to update the window state whenever the App component mounts. With the below code, I receive an Error in response to tabs.query: TypeError: this.addTabs is not a function.

I don't understand why this.addTabs is not considered a function, as the function is above the reference to this.addTabs(tabs), and I think it was correctly bound.

class App extends Component {
 constructor(props){
  super(props);
  this.state = {
     window: []
  };
  this.addTabs = this.addTabs.bind(this);
}

addTabs(tabs){
  this.setState({window:this.state.window.concat(tabs)});
};

componentDidMount(){
  chrome.tabs.query({active:true},function(tabs){
    this.addTabs(tabs);
});

I'm not looking to use the arrow function. I looked at similar questions, and the response was to bind the function in the constructor, which I believe I did. Any help or pointers would be appreciated!

If you dont use arrow function, you are actually referring to the function context when you use ‘this.addTabs(tabs), otherway is to you can define ‘_this = this’ inside componentDidMount and use _this.addTabs — Aamin Khan
– Aamin Khan, Commented Dec 23, 2018 at 16:03
Thanks @AaminKhan - that solved it. I should probably read up on JS function context. Cheers — Jay C
– Jay C, Commented Dec 23, 2018 at 16:12

quirimmo · Accepted Answer · 2018-12-23 16:13:02Z

4

Your issue is in this block:

componentDidMount(){
  chrome.tabs.query({active:true},function(tabs){
    this.addTabs(tabs);
  });
}

Inside your callback, the context is different so this refers to another context.

You have several ways to fix it.

1) Assign the ref to this outside the callback and use that ref:

componentDidMount(){
  const that = this;
  chrome.tabs.query({active:true},function(tabs){
    that.addTabs(tabs);
  });
}

2) Bind the current this to the callback:

componentDidMount(){
  chrome.tabs.query({active:true},(function(tabs){
    this.addTabs(tabs);
  }).bind(this));
}

3) Use an arrow function:

componentDidMount(){
  chrome.tabs.query({active:true}, (tabs) => {
    this.addTabs(tabs);
  });
}

answered Dec 23, 2018 at 16:13

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

1 Comment

Jay C Over a year ago

Thanks a ton! Super helpful

Collectives™ on Stack Overflow

JS React: error of this.x is not a function, even when this.x function is bound

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related