Implementing JavaScript code to ReactJs logic doesn't work-CodePudding

I am new to react and i need some help.

I am trying to implement some hamburger menu icon that someone put on codepen:

https://codepen.io/rss/pen/OJxZrR

The problem is that i can't get animation to work.

import "../../index.css";

const [style, setStyle] = useState("nav-container");


const changeStyle = () => {
setStyle("pushed")};

I tried something like this and I added button onClick for changing state but it doesn't work

       <button
          onClick={() => {
            changeStyle();
          }}
        >
          <div id="nav-container">
            <div className="toggle-icon">
              <span className="bar"></span>
              <span className="bar"></span>
              <span className="bar"></span>
            </div>
          </div>
        </button>

CodePudding user response：

You can use the state as a toggle and set the class pushed if the state is true

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [pushed, setPushed] = useState(false);

  const changeStyle = () => {
    setPushed(!pushed);
  };
  return (
    <button
      onClick={() => {
        changeStyle();
      }}
    >
      <div id="nav-container">
        <div className={`toggle-icon ${pushed ? "pushed" : ""}`}>
          <span className="bar"></span>
          <span className="bar"></span>
          <span className="bar"></span>
        </div>
      </div>
    </button>
  );
}

CodePudding user response：

I think you need to provide dynamic id to the div, as :

<div id={style}>
            <div className="toggle-icon">
              <span className="bar"></span>
              <span className="bar"></span>
              <span className="bar"></span>
            </div>
          </div>

CodePudding user response：

You just need to toggle pushed class on nav-container div

Change your onClick handler to this

const changeStyle = () => {
  const navContainer = document.getElementById("nav-container");
  navContainer.classList.toggle("pushed");
};

CodePudding user response：

Some precautions -

Make sure your button hover make the cursor pointer. Otherwise can have low z-index problem
const changeStyle = (e) => { e.preventDefault(); setPushed(!pushed); };
There is no content inside it. So make sure it's existence.