Question

0

109

Views

Implementing JavaScript code to ReactJs logic doesn't work

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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T10:02:03.525Z

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>
  );
}

Answer 2 · 2022-07-03T10:02:03.535Z

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");
};

Answer 3 · 2022-07-03T10:02:03.542Z

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.

0

109

Implementing JavaScript code to ReactJs logic doesn't work

3 answers

0

0

0

Find remote jobs

Andres GPT