How to toggle classes with with Gatsby link

Question

I am using Gatsby and Bulma css.

I can't toggle the classes on the 'navMenu' and get the to navigation (visual) change in accordance to device screen size. The changes will effect the 'a' element, but not the corresponding 'navMenu' element. The 'a' element will change the 'burger' icon to a 'cross' icon which is expected.

Here is my code

    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a href="#"
          role="button"
          className={`navbar-burger burger ${isActive? ' is-active' : ' '}`} onClick={()=> {isActive = !isActive}}
          aria-label="menu"
          data-target="navMenu"
          aria-expanded="true"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>


      <div  id="navMenu" className="navbar-menu">
        <div className="navbar-start">
          <a className="navbar-item">Home</a>

          <a className="navbar-item">Documentation</a>

          <div className="navbar-item has-dropdown is-hoverable">
            <a className="navbar-link">More</a>

            <div className="navbar-dropdown">
              <a className="navbar-item">About</a>
              <a className="navbar-item">Jobs</a>
              <a className="navbar-item">Contact</a>
              <hr lass="navbar-divider"></hr>
              <a className="navbar-item">Report an issue</a>
            </div>
          </div>
        </div>

        <div className="navbar-end">
          <div className="navbar-item">
            <div className="buttons">
              <a className="button is-primary">
                <strong>Sign up</strong>
              </a>
              <a className="button is-light">Log in</a>
            </div>
          </div>
        </div>
      </div>
    </nav>

I would like the 'navMenu' to show up whenever the onClick event is raised.

Thanks

Answer 1

this should works :

import React, { Component } from "react";
import "./style.scss";


class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }
  handleClick = () => {
    this.setState({ active: !this.state.active });
   };
render() {

 return (
  <nav className="navbar" role="navigation" aria-label="main navigation">
    <div className="navbar-brand">
      <a className="navbar-item" href="https://bulma.io">
        <img
          src="https://bulma.io/images/bulma-logo.png"
          style={{ width: "112", height: "28" }}
          alt=""
        />
      </a>

      <span
        role="button"
        className={
          "navbar-burger burger " + (this.state.active ? "is-active" : "")
        }
        aria-label="menu"
        aria-expanded="false"
        data-target="navbarBasicExample"
        onClick={this.handleClick}
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </span>
    </div>
    <div
      id="navbarBasicExample"
      className={"navbar-menu " + (this.state.active ? "is-active" : "")}
    >
      <div className="navbar-start">
        <a className="navbar-item">Home</a>

        <a className="navbar-item">Documentation</a>

        <div className="navbar-item has-dropdown is-hoverable">
          <a className="navbar-link">More</a>

          <div className="navbar-dropdown">
            <a className="navbar-item">About</a>
            <a className="navbar-item">Jobs</a>
            <a className="navbar-item">Contact</a>
            <hr className="navbar-divider" />
            <a className="navbar-item">Report an issue</a>
          </div>
        </div>
      </div>

      <div className="navbar-end">
        <div className="navbar-item">
          <div className="buttons">
            <a className="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a className="button is-light">Log in</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
    );
  }
}

export default Navbar;

Example on codesandbox.io : https://codesandbox.io/s/bulma-reactjs-toggle-menu-hxux4