Value of 'this' is null in an onClick method for ReactJS component

Question

The error happens on the onClick method of <span className="nav-toggle">. The error is: cannot read property setState of null.I think it's an issue with the scoping of this or because setState is an async method. That's why I've tried using the recommended method in the docs (using setState with a function instead of passing in a new state object).

export default class NavigationBar extends Component {
 constructor(props) {
  super(props);
  this.state = {
   isMobile: this.props.isMobile
  };
 }

render() {
 console.log('Rendering component');
 return (
  <header className="nav has-shadow">
   <div className="nav-left">
    <Link className="title" to="/">Food Diary</Link>
   </div>

   <span className={ (this.state.isMobile) ? 'nav-toggle is-active' : 'nav-toggle'} onClick={this.toggleMobileNav}>
    <span></span>
    <span></span>
    <span></span>
   </span>

   <div className={ (this.state.isMobile) ? 'nav-right nav-menu is-active' : 'nav-right nav-menu'}>
    <Link className={(this.props.currentActivePage === 'Home')? "nav-item is-active" : "nav-item"} to="/">
     {(this.props.loggedIn) ? 'Home' : 'Login | Register'}
    </Link>
    <Link className={(this.props.currentActivePage === 'Dashboard')? "nav-item is-active" : "nav-item"} to="/dashboard">
     Dashboard
    </Link>
    <Link className={(this.props.currentActivePage === 'Account')? "nav-item is-active" : "nav-item"} to="/account">
     My Account
    </Link>
    <span className="nav-item">
     <a className="button is-dark" href="https://github.com/">
      <span className="icon">
       <i className="fa fa-github"></i>
      </span>
      <span>Github Repository</span>
     </a>
    </span>
   </div>
  </header>
 );
}

toggleMobileNav() {
 console.log('Got inside toggleMobileNav');
 this.setState((prevState, props) => {
  return {
   isMobile: !prevState.isMobile
  };
 });
}
};

Gotta bind events handlers and `this` a la `this.handleClick = this.handleClick.bind(this);` which you can read up on [here](https://facebook.github.io/react/docs/handling-events.html) — Alexander Nied, Apr 26 '17 at 18:25
Thank you so much for your help, it works now! I've been trying to find documents and answers on SO for this problem for hours now. — ScaVenGerS, Apr 26 '17 at 18:29

score 0 · Accepted Answer · answered Apr 26 '17 at 18:27

You have to bind this to handlers:

export default class NavigationBar extends Component {
  constructor(props) {
    super(props);
      this.state = {
       isMobile: this.props.isMobile
      };
    this.toggleMobileNav = this.toggleMobileNav.bind(this); // BIND TO THIS
  }

  render() {
   console.log('Rendering component');
   return (
    <header className="nav has-shadow">
     <div className="nav-left">
      <Link className="title" to="/">Food Diary</Link>
     </div>

     <span className={ (this.state.isMobile) ? 'nav-toggle is-active' : 'nav-toggle'} onClick={this.toggleMobileNav}>
      <span></span>
      <span></span>
      <span></span>
     </span>

     <div className={ (this.state.isMobile) ? 'nav-right nav-menu is-active' : 'nav-right nav-menu'}>
      <Link className={(this.props.currentActivePage === 'Home')? "nav-item is-active" : "nav-item"} to="/">
       {(this.props.loggedIn) ? 'Home' : 'Login | Register'}
      </Link>
      <Link className={(this.props.currentActivePage === 'Dashboard')? "nav-item is-active" : "nav-item"} to="/dashboard">
       Dashboard
      </Link>
      <Link className={(this.props.currentActivePage === 'Account')? "nav-item is-active" : "nav-item"} to="/account">
       My Account
      </Link>
      <span className="nav-item">
       <a className="button is-dark" href="https://github.com/">
        <span className="icon">
         <i className="fa fa-github"></i>
        </span>
        <span>Github Repository</span>
       </a>
      </span>
     </div>
    </header>
   );
  }

  toggleMobileNav() {
   console.log('Got inside toggleMobileNav');
   this.setState((prevState, props) => {
    return {
     isMobile: !prevState.isMobile
    };
   });
  }
};

More information here

Value of 'this' is null in an onClick method for ReactJS component

1 Answers1