Linking to another page triggers console warning - Can't perform a React state update on an unmounted component.

[frazerf]

Hi all,

I'm having a problem when I try and link to another page. I get hit with the console error -

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

When I visit the same page, everything works fine, the menu transition triggers and closes to the right, however when I visit another page that isn't the current page I get an error.

I'm setting the onStateChange as per the issue here https://github.com/negomi/react-burger-menu/issues/446 but I'm still having problems.

Can anyone see where I'm going wrong?

import { Link } from 'gatsby'
import React from 'react'
import { slide as Menu } from 'react-burger-menu'

class Navbar extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      menuOpen: false
    }
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange (state) {
    this.setState({menuOpen: state.isOpen})  
  }
  
  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu () {
    this.setState({menuOpen: false})
  }

  // This can be used to toggle the menu, e.g. when using a custom icon
  // Tip: You probably want to hide either/both default icons if using a custom icon
  // See https://github.com/negomi/react-burger-menu#custom-icons
  toggleMenu () {
    this.setState(state => ({menuOpen: !state.menuOpen}))
  }

  render() {
    // NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling
    return (
      <div className="container">
        <nav>
          <div>
            <img src="/logo.svg" alt="logo" />
          </div>
          <Menu
            right
            bodyClassName={ "menu-open" }
            isOpen={this.state.menuOpen}
            onStateChange={(state) => this.handleStateChange(state)}
          >
            <div className="burger-menu">
              <ul>
                <li>
                  <h2><Link onClick={() => this.closeMenu()} to="/">Home</Link></h2>
                </li>
                <li>
                  <h2><Link onClick={() => this.closeMenu()} to="/about/">About</Link></h2>
                </li>
              </ul>
            </div>
          </Menu>
        </nav>
      </div>
    );
  }
}

export default Navbar

Thanks!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.