Unable to implement a side Navbar using React

Question

I wanted to implement a hamburger side navbar using react but I am unable to implement the changes that must be displayed on Clicking the hamburger. I am still learning React so please explain what am I doing wrong and feel free to suggest an alternative approach. Here is my code.

import React from 'react';
import * as FaIcons from "react-icons/fa";

class Navbar extends React.Component {
    constructor() {
        super();
        this.state = {
            navbarState : 1,
            style : {}
        }
    }

    openNav() {
        this.setState({"width" : "250px"});
    }

    closeNav() {
        this.setState({"width" : "0px"});
    }

    handleClick() {
        this.setState((prevState) => {
            if(prevState.navbarState === 0) {
                return {navbarState : 1, style : {width : '250px'}};
            }
            else {
                return {navbarState : 0, style : {width : '0px'}};
            }
        });
    }

    render() {
        return (
            <div>
                <div id="mySidenav" className="sidenav" style={this.state.style} >
                    {console.log(this.state.navbarState)}
                    <a href="#" className="closebtn" onClick={() => this.handleClick}>&times;</a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Clients</a>
                    <a href="#">Contact</a>
                </div>
                <span onClick={() => this.handleClick}>
                    {/* <FaIcons.FaBars /> */}
                    <div className = "hamburger">
                        <div className="line"></div>
                        <div className="line"></div>
                        <div className="line"></div>
                    </div>
                </span>
            </div>
        );
    }
}

export default Navbar;
           
           
           

And my CSS is as follows :

.hamburger{
    position: absolute;
    cursor: pointer;
    margin: 5px;
    right: 5%;
    top: 5%;
}



.line{
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
}


.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: black; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


.sidenav-active {
  height: 100%; /* 100% Full-height */
  width: 250px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: black; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

}


/* The navigation menu links */
.sidenav a, .sidenav-active a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
           

Answer 1

First it looks like as you're using a Class-Based Component and you're not binding your handleClick function correctly. Solution to this is either to bind it in your constructor or use an arrow function like so:

handleClick = () => { ... }

This will apply similarly to your other two functions. For further information on Arrow Functions and Binding your functions within Class-Based Components see: https://reactjs.org/docs/faq-functions.html

Secondly, I suspect that handleClick being called in your <span>. Instead of

<span onClick={() => this.handleClick} ... />

Try

<span onClick={this.handleClick} ... /> or <span onClick={() => this.handleClick()} ... />

Let me know if this helps!