Switch the visibility of a div tag using Next.js

Question

Switch the visibility of a div tag using Next.js

Script

export default function Navigation(){
  let displayMenu = false;
  function toggleMenu()
  {
    displayMenu = !displayMenu;
  }
  return (
    <>
      <button onClick={toggleMenu}>Toggle Navigation</button>
      {/*This code should toggle on and off when the button is pressed*/}
      <div style={{
        display: displayMenu?"block":"none"
      }}>
        This should toggle the menu display
      </div>
    </>
  );
}

Objective

The visibility of the div element should toggle (For instance, showing the div tag after one click on the button, hiding it after another click, and so forth).

Actual Outcome

Though the variable displayMenu changes, the div element does not react to these modifications and remains hidden.

NOTE: This script is being used in a next.js environment.

javascript reactjs next.js

Answer 1

Answer №1

To ensure that React re-renders the component when showMe changes, it is essential to declare showMe as a state variable. Check out this resource for more information: https://reactjs.org/docs/hooks-state.html

The modified code snippet below demonstrates how useState is utilized instead of directly assigning to showMe.

export default function Header(){
  const [showMe, setShowMe] = useState(false);
  function toggle(){
    setShowMe(!showMe);
  }
  return (
    <>
      <button onClick={toggle}>Toggle Subjects</button>
      {/*The bottom code should toggle on and off when the button is pressed*/}
      <div style={{
        display: showMe?"block":"none"
      }}>
        This should toggle my display
      </div>
    </>
  );
}

The syntax

const [showMe, setShowMe] = useState(false);

involves Array Destructuring. Learn more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

When using useState, an array with two elements is returned. By utilizing array destructuring, we assign the first element to showMe and the second element to setShowMe.

Answer 2

To ensure that React re-renders the component when showMe changes, it is essential to declare showMe as a state variable. Check out this resource for more information: https://reactjs.org/docs/hooks-state.html

The modified code snippet below demonstrates how useState is utilized instead of directly assigning to showMe.

export default function Header(){
  const [showMe, setShowMe] = useState(false);
  function toggle(){
    setShowMe(!showMe);
  }
  return (
    <>
      <button onClick={toggle}>Toggle Subjects</button>
      {/*The bottom code should toggle on and off when the button is pressed*/}
      <div style={{
        display: showMe?"block":"none"
      }}>
        This should toggle my display
      </div>
    </>
  );
}

The syntax

const [showMe, setShowMe] = useState(false);

involves Array Destructuring. Learn more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

When using useState, an array with two elements is returned. By utilizing array destructuring, we assign the first element to showMe and the second element to setShowMe.

Switch the visibility of a div tag using Next.js

Script

Objective

Actual Outcome

Answer №1

Similar questions

Is there a way to programmatically create multiple MUI Select components with their corresponding options?

Node.js Export Module Error - importance of separating concerns

Encountered an error with "Unexpected token import" while attempting to run pm2 on my React application deployed on a Digital

Incorporate an external object not native to the Angular framework within a factory

Error: VueJS mixins do not include the property definition

Vue.js numerical input module

The slot "update" is required in the amp-live-list component

Is it possible to eliminate a style that was applied using the .css() method?

The error message in Nextjs is indicating that the Swiper scss package path could not be

Position the Material-UI AppBar and Tab on the far right of the screen

Ensuring that files adhere to the required format, whether they be images

Issue: The content of the text does not align with the HTML generated by the server

Is there a way for me to choose a single file while executing the migrate-mongo up command?

Displaying child properties in a functional ReactJS component

Enhance User Experience with Dynamic Scroll Page Transition

There has been a mistake: The module '.... ode_modules erser-webpack-plugindistindex.js' cannot be found. Please ensure that the package.json file contains a correct "main" entry

Divide a SINGLE BACKGROUND IMAGE in HTML into two separate links of equal size, one at the top and

When React first fetches data and users move to chat with each other, the state value does not update

Passing Parameters to Razor Pages Controller

I am experiencing problems with invalidating queries following a mutation