navbar.js

import React from "react";
import { Link } from 'gatsby'
import MainSearchInput from "../components/main_search";

class Navbar extends React.Component {
  _isMounted = false;
  constructor() {
    super()
    this.state = {
      searchBarShown: false,
      menuItems : [
        {
          title: 'Events',
          url: '/events'
        },
        {
          title: 'Newsletter',
          url: '/newsletter'
        },
        {
          title: 'User Area',
          url: '/me'
        }
      ]
    }
  }

  componentDidMount = () => {
    this._isMounted = true;
  }

  componentWillUnmount = () => {
    this._isMounted = false;
  }
  
  showSearch = () => {
    console.log(this._isMounted);
    if (!this._isMounted) return false;
    this.setState({ searchBarShown: true });
  }

  hideSearch = () => {
    console.log(this._isMounted);
    if (!this._isMounted) return false;
    this.setState({ searchBarShown: false });
  }
  
  render() {
    return (
      <div className="navbar-end">
        {this.state.menuItems.map((item) =>
          <Link
            key={item.title}
            to={item.url}
            className="navbar-item"
            title={item.title}
          >
          {item.title}

          </Link>
        )}
        <button className="navbar-item" onClick={this.showSearch}>Search</button>

        <MainSearchInput shown={this.state.searchBarShown} buttonOnClick={this.hideSearch}/>
      </div>
    )
  }
}

export default Navbar