CODEWITHSUNDEEP
reactjs
Jon Nicholson
Jon Nicholson

Reputation: 1131

Creating a Hamburger menu in React

Hopefully this is a really simple one, but I'm struggling to understand why there are such complicated answers out there. I'm converting a website across to React from plain HTML/CSS/JS at the moment. In there, you have, as an example - an external Vanilla JS file which has the code required to make the hamburger menu open and close.

Like so:

// Variables

let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");


// Function

function hamburgerActive() {
  line1.classList.toggle("active");
  line2.classList.toggle("active");
  navList.classList.toggle("active");
}

// Event Listener

hamburger.addEventListener("click", hamburgerActive);

Now with React, I've rendered the header, which has the hamburger menu in it. This is stored in a index.js file, with a separate component imported and rendered from a 'Header.js' file.

How do I go about transferring the vanilla JS into my Header component? Would the best way to approach it be to add a 'onclick' to the Header component in the Header.js file?

All the alternatives out there are talking about introducing props, states etc - that to me feels way too complicated for what is a really simple vanilla JS action. There must be a simple way of just putting this code in and making it work?

For reference, here is the Header component as is:

class Header extends React.Component {

  render() {
    return (


      <header className="universal-header-section">
        <div className="universal-header-container">
          <div className="universal-header-hamburger">
            <div id="hamburger">
              <span id="hamburger-line-1" class="hamburger-span" />
              <span id="hamburger-line-2" class="hamburger-span" />
            </div>
          </div>
          <div className="universal-header-logo">
            <a href="index">
              <h2>TBC</h2>
            </a>
          </div>
          <div className="universal-header-basket">
            <a href="basket">
              <i className="fas fa-shopping-cart fa-2x"></i>
            </a>
          </div>
        </div>
        <div id="hamburger-nav-list">
          <div class="hamburger-container">

          </div>
        </div>
      </header>
    )
  }
}

Can somebody advise or will I have to use props/state?

Thanks. Hopefully that all makes sense! 😊

Upvotes: 3

Views: 2916

Answers (1)

Red Baron
Red Baron

Reputation: 7652

you should use state, it is designed for stuff like this:

using a functional component like so:

const Header = () => {

   const [toggle, setToggle] = useState(true) // you could default to false

    return (
// this will toggle the state to be true/false (opposite to the previous one) then
based on that you can add certain classes to either show or hide it

      <header className="universal-header-section" onClick={() => setToggle(!toggle)}>
        <div className="universal-header-container">
          <div className="universal-header-hamburger">
            <div id="hamburger">
              <span id="hamburger-line-1" class=`hamburger-span ${toggle ? 'active' : ''} ` />
              <span id="hamburger-line-2" class=`hamburger-span ${toggle ? 'active' : ''} ` />
            </div>
          </div>
          <div className="universal-header-logo">
            <a href="index">
              <h2>TBC</h2>
            </a>
          </div>
          <div className="universal-header-basket">
            <a href="basket">
              <i className="fas fa-shopping-cart fa-2x"></i>
            </a>
          </div>
        </div>
        <div id="hamburger-nav-list">
          <div class="hamburger-container">

          </div>
        </div>
      </header>
    )
  }
}

you can add a new class name like this:

<div className={`myClass toggle ? "active" : ''}></div>

this code is saying if toggle is true, then add active to this class, if not, add ''. so you can add this to the classes that need to change onClick

Upvotes: 2

Related Questions