Brtdku

Getting this Uncaught TypeError: Cannot read property 'setState' of undefined when trying to setState in a function. I'm aware that there are other similar issues already posted but none of them are using react-autobind

this works when I bind the function in the constructor Like so :

this.toggleNav = this.toggleNav.bind(this)

However I would like to accomplish this with react-autobind

import React from "react";

import ReactDOM from "react-dom";

import ScrollspyNav from "react-scrollspy-nav";

import autoBind from 'react-autobind';



export default class Navigation extends React.Component {

constructor(props) {

  super(props);

  autoBind(this);



  this.state = {

    toggleMobileNav: false

  };



}



    toggleNav() {

      this.setState((prev, props) => {

        return {

            toggleMobileNav: !prev.toggleMobileNav

        }

      });

    }





render() {

    return(



        <ScrollspyNav

            scrollTargetIds={["page-top", "about", "projects", "signup"]}

            activeNavClass="is-active"

            scrollDuration="1000"

            headerBackground="false"

            activeNavClass="active-nav"

        >



            <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

              <div className="container">

                <a id="page-top" className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>

                <button className="navbar-toggler navbar-toggler-right" onClick={this.toggleNav} type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

                  Menu &nbsp;&nbsp;

                  <i className="fas fa-bars"></i>

                </button>

                <div className= {this.state.toggleMobileNav ? "show collapse navbar-collapse" : " " + 'collapse navbar-collapse'} id="navbarResponsive">

                  <ul className="navbar-nav ml-auto">

                    <li className="nav-item">

                      <a className="nav-link" href="#about">About</a>

                    </li>

                    <li className="nav-item">

                      <a className="nav-link" href="#projects">Projects</a>

                    </li>

                    <li className="nav-item">

                      <a className="nav-link" href="#signup">Contact</a>

                    </li>

                  </ul>

                </div>

              </div>

            </nav>

        </ScrollspyNav>

)

}
}

If you use arrow function syntax to declare your method, you will not need to call this.toggleNav = this.toggleNav.bind(this) or use react-autobind

toggleNav = () => {

  this.setState((prev, props) => {

    return {

      toggleMobileNav: !prev.toggleMobileNav

    }

  });

}

Here's a Medium post that covers all the options: https://medium.com/komenco/react-autobinding-2261a1092849