TypeError: this.state.show is not a function

Question

I'm new in React.js, and I am learning to create a navigation component that lets me clicked on the hamburger button to view the menu on mobile and table. It's saying that error message is on line 42

Here's my request and how I am attempting to render the data:

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Dropdown from "../components/pages/dropdowns/dropdown.js";
import hamburger from "../components/images/menu.svg";



class Navigation extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                show: false
            }
        }

        toggleShow() {
            this.toggleShow = this.toggleShow.bind(this)
            this.hide = this.hide.bind(this)
            this.setState({ show: !this.state.show });
        }

        hide(e) {
            if (e && e.relatedTarget) {
                e.relatedTarget.click();
            }
            this.setState({ show: false });
        }

---

  render() {
      return (
          <Router>
              <div className="FlexContainer NavbarContainer">
                  <div className="mobilecontainer LeftNav">
                      <h2 className="BrandName LeftNav mobileboxmenu inline">Kommonplaces</h2>
                      <div 
                      className="hamburger inlinev"  
                      onClick={this.toggleShow}  
                      onBlur={this.hide}>
                          <img alt="menubtn" src={hamburger}></img>
                      </div>
                  </div>

                  {
                        this.state.show 
                    ( 
                        <ul className="NavBar">
                            <Dropdown/>    
                            <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                            <li className="RightNav"><Link to="/">About Us</Link></li>
                            <li className="RightNav"><Link to0="/">Contact Us</Link></li>
                            <li className="RightNav"><Link to="/">Sign Up</Link></li>
                            <li className="RightNav"><Link to="/">Login</Link></li>
                        </ul>
                    )
                  }
               </div>
         </Router>
      );
    }
}
  export default Navigation;

I get the following error:

TypeError: this.state.show is not a function

  39 |     className="hamburger inlinev"  
  40 |     onClick={this.toggleShow}  
  41 |     onBlur={this.hide}>
> 42 |         <img alt="menubtn" src={hamburger}></img>
     | ^  43 |     </div>
  44 | </div>
  45 | 

Answer 1

You need to add && after this.state.show.

Answer 2

I imagine you want to conditionally render based on the state, right?

In this case, the code should be something like this:

{
  this.state.show &&
  ( 
    <ul className="NavBar">
      <Dropdown/>    
      <li className="RightNav"><Link to="/">Host Your Space</Link></li>
      <li className="RightNav"><Link to="/">About Us</Link></li>
      <li className="RightNav"><Link to0="/">Contact Us</Link></li>
      <li className="RightNav"><Link to="/">Sign Up</Link></li>
      <li className="RightNav"><Link to="/">Login</Link></li>
    </ul>
  )
}