ReactJS Hamburger icon not toggling

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;