React: Component cannot recognize a function

Question

In my App component I call checkUserAuth() method in order check if user is logged in or not and render different content according to this. It works fine when I call it via componentDidMount() method however it doesn't work If I try to call it via another method:

TypeError: this.checkUserAuth is not a function

In my code:

class App extends React.Component {

  constructor() {
    super();

      this.state = {
      loggedIn: false
      };

      this.checkUserAuth = this.checkUserAuth.bind(this);
  }

  componentDidMount(){
      this.checkUserAuth(); // here this method can be called
  }

  checkUserAuth(){
    const loggedUser = AuthService.isAuthenticated();
    if(loggedUser){
    store.dispatch(actions.loginSuccess());
    this.setState({loggedIn: true});
    }
  }


  logoutUser(){
    store.dispatch(actions.logout());
    this.checkUserAuth(); // here it return errors
  }

How can I fix it?

Lifecycle methods are always called with the context of this being the class instance whereas your method is most likely called like this.logoutUser() meaning inside your function, this will refer to the function itself. That is why you have to bind your function but not componentDidMount in order for it to work. This answer explains in more detail. — Brian Thompson
– Brian Thompson, Commented Nov 18, 2019 at 16:42

TKoL · Accepted Answer · 2019-11-18 16:21:51Z

3

put this in the constructor:

this.logoutUser = this.logoutUser.bind(this);

Also, consider using an auto-binding library if you find it tedious to always bind stuff. I use react-autobind

answered Nov 18, 2019 at 16:21

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

React: Component cannot recognize a function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related