ReactJS Hamburger icon not toggling - reactjs

Question

I am using this library for front end which is based on Bulma and I'm facing issues with Hamburger Icon Here is the documentation Example, but again this is something not very easy to understand. I have searched for a workaround and a solution for this, but I cannot find it, I'm doing it in ES6 Style, and here is my code.
import React, { Component } from "react";
import { Navbar } from "react-bulma-components/full";
class MenuNavbar extends Component {
render() {
return (
<div id="header">
<Navbar color="info" fixed="top">
<Navbar.Brand>
<Navbar.Item renderAs="a" href="/">
<img src="https://i.imgur.com/9jQaBuq.png" alt="Dew Ventures" />
</Navbar.Item>
<Navbar.Burger />
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Container>
<Navbar.Item href="/">Home</Navbar.Item>
<Navbar.Item href="/about"> About Us</Navbar.Item>
<Navbar.Item href="/contact"> Contact Us</Navbar.Item>
</Navbar.Container>
</Navbar.Menu>
</Navbar>
</div>
);
}
}
export default MenuNavbar;

Answer 1

<Navbar.Burger
active={open}
onClick={() =>
this.setState(state => {
open: !state.open;
})
}
/>
From the Storybook you linked to, the example shows that there is an onClick handler that sets the state to change the hamburger into a cross. You need to have some kind of handler that sets the active prop to true. That will change the hamburger to a cross whenever you click the component.
And from the source code of that library for the burger component within the Navbar that you're using, the component requires you to pass in the active prop as true to set the is-active css class, which Bulma uses natively to change the hamburger to a cross:
import React, { Component } from "react";
import { Navbar } from "react-bulma-components/full";
class MenuNavbar extends Component {
// set active state for hamburger
state = { active : false }
handleClick = () => {
const { active } = this.state;
this.setState({ active: !active });
}
render() {
return (
<div id="header">
<Navbar color="info" fixed="top" active={this.state.active}>
<Navbar.Brand>
<Navbar.Item renderAs="a" href="/">
<img src="https://i.imgur.com/9jQaBuq.png" alt="Dew Ventures" />
</Navbar.Item>
<Navbar.Burger
active={this.state.active}
onClick={this.handleClick}
/>
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Container>
<Navbar.Item href="/">Home</Navbar.Item>
<Navbar.Item href="/about"> About Us</Navbar.Item>
<Navbar.Item href="/contact"> Contact Us</Navbar.Item>
</Navbar.Container>
</Navbar.Menu>
</Navbar>
</div>
);
}
}
export default MenuNavbar;

Answer 2

You can toggle navbar in pure Bulma CSS with ref usage:
burger = React.createRef();
menu = React.createRef();
toggle = () => {
if (this.menu.current.classList.contains("is-active")) {
this.menu.current.classList.remove("is-active");
} else {
this.menu.current.classList.add("is-active");
}
};
this approach adopted also for your case

Answer 3

Plug and Play React usag utilizing UseEffect...
Remember to add the nav-toggle and navbar-menu classes to your burger and nav respectively
useEffect(() => {
(function() {
var burger = document.querySelector('.nav-toggle');
var menu = document.querySelector('.navbar-menu');
burger.addEventListener('click', function() {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();
}, [])
<nav className="navbar">
<div className="navbar-brand is-1">
<a href="/" className="navbar-item">
<img src={logo} alt="YMCA"/>
</a>
<button className="navbar-burger burger is-white button nav-toggle"
aria-label="menu" aria-expanded="false" data-target="Options">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
<div className="navbar-menu is-8 is-offset-a" id="Options">
<div className="navbar-end mt-2">
<button type="submit">Association Level Prediction</button>
<button type="submit" >Custom Prediction</button>
<button type="submit" onClick={() => handleNavigate(ROUTE_ABOUT)} className={checkIfActive(ROUTE_ABOUT)}>About</button>
<button type="submit" onClick={() => handleLogout()} className={checkIfActive('logout')}>Logout</button>
</div>
</div>
</nav>