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.