Using JavaScript code in ReactJS does not produce the desired results

Question

Using JavaScript code in ReactJS does not produce the desired results

Just starting out with react and could use a little guidance.

I came across this interesting hamburger menu icon on codepen:

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

The challenge I'm facing is getting the animation to function properly.

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

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


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

I attempted something similar to this and included a button onClick event to toggle state, but it's not working as expected.

       <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>

javascript css reactjs

Answer 1

Answer №1

To create a toggle effect, utilize the state and apply the class "pushed" when the state is true

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

export default function ToggleButton() {
  const [isPushed, setIsPushed] = useState(false);

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

Answer 2

To create a toggle effect, utilize the state and apply the class "pushed" when the state is true

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

export default function ToggleButton() {
  const [isPushed, setIsPushed] = useState(false);

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

Answer 3

Answer №2

In my opinion, adding a dynamic id to the div is essential for better functionality:

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

Answer 4

In my opinion, adding a dynamic id to the div is essential for better functionality:

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

Answer 5

Answer №3

To make the desired effect, simply switch the pushed class on the nav-container element.

Modify your onClick function like so:

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

Answer 6

To make the desired effect, simply switch the pushed class on the nav-container element.

Modify your onClick function like so:

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

Answer 7

Answer №4

Here are a few safety measures to consider:

Ensure that your button hovers change the cursor to a pointer. Otherwise, you may encounter a low z-index issue.
const modifyStyle = (e) => { e.preventDefault(); togglePushedState(!pushed); };
Since there is no content within it, verify its presence.

Answer 8

Here are a few safety measures to consider:

Ensure that your button hovers change the cursor to a pointer. Otherwise, you may encounter a low z-index issue.
const modifyStyle = (e) => { e.preventDefault(); togglePushedState(!pushed); };
Since there is no content within it, verify its presence.

Using JavaScript code in ReactJS does not produce the desired results

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

using node.js to save query results as global variables

Discover a technique to display every individual "echo" statement from PHP in sequence, rather than waiting for the entire script to finish executing

What is the best way to adjust the height of a dropdown box in an angular application?

CSS Device Media

Angular routing and parameters are not functioning as expected

JavaScript: Obtaining the month based on the week number and year

What are some ways I can incorporate async and await within a React render function?

Constantly loading image with Meteor HTTP request

Exploring and verifying data within an array in ReactJS

Customize the input of MuiSwitch in Material-UI v5

Encountering a login issue with the jsonwebtoken code, specifically getting the error message "something went wrong logging in TypeError: Cannot read properties of undefined (reading 'sign')."

Building a conditional statement in React based on the URL path: A beginner's guide

Incorporating a way to automatically initiate a GET request following a POST request in React can effortlessly display a new

Maintain the background color of the form select drop down even after clicking away from the form

Using NodeJS to convert a Base64 string into a JPEG image with the help of either NodeJS or

Issue with MVC page redirection not functioning properly after successful completion of an AJAX request

What is the process for including .php and .js files within WordPress?

What steps should I take to repair my image modal button?

Issue with React Material-UI Select component not displaying the chosen value

What is the best way to rotate a ThreeJS Object3D object around its endpoint?