'How to Show or Hide a div using useState in NextJS?
I’m new to React but trying to build a responsive website with a “desktop header” and “mobile header” that is shown when the user clicks on a menu-icon-toggle and closes when the user clicks on Close-icon. I’m obviously doing it wrong but can’t seem to figure out what the problem is, I believe that NextJS doesn’t know what to open or close.
**Note: I´m using TailwindCSS and this is a component that will be rendered on the index page
My code looks something like this (simplified, without all the content):
import React, { useState } from 'react'
import Image from 'next/Image'
function header() {
const \[mobile__Header, setMobile__Header\] = useState(false)
const showMobile__Header = () =\> setMobile__Header(!mobile__Header)
return (\<div\>
{/* mobile header */}
<div className='absolute flex flex-col w-screen h-screen place-content-between bg-white text-black p-5 z-50'>
<div className='flex items-center justify-between'>
{/* Left Logo */}
<div className='cursor-pointer'>
</div>
{/* close icon */}
<div className='cursor-pointer' onClick={showMobile__Header}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
{/* nav links */}
<div className='flex'>
<div className='flex flex-col text-xl space-y-3'>
</div>
</div>
{/* Social links and languaje changer */}
<div className='flex justify-between font-light'>
<div>
<a className="link" href="">EN</a>
</div>
<div className='flex flex-col'>
</div>
</div>
</div>
{/* desktop header */}
<header className="flex w- px-10 py-1 justify-between">
<div className="flex">
{/* Left Logos */}
<div className="flex md:hidden cursor-pointer">
</div>
<div className="hidden md:flex cursor-pointer">
</div>
</div>
<div className="flex items-center">
{/* Menu icon toggle */}
<div className='flex md:hidden cursor-pointer' onClick={showMobile__Header}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
{/* Right Nav Links and language changer */}
<div className="space-x-4 px-5 py-5 hidden md:flex ">
</div>
</div>
</header>
</div>
)}
export default header
Solution 1:[1]
You have many HTML/CSS issues like positioning and element structure.
The free tailwindui example is a solid example to reference. It has nice transitions and accessibility baked in, which I removed for the example. It also uses headlessui and heroicons, both were built by the TW team. The TW menu components handle the state internally, so you will not be able to see the logic in their example.
The below responsive example is based on the above-referenced version but without external dependencies.
import { useState } from "react";
const Navbar = () => {
const [isOpen, setOpen] = useState(false);
const toggleMenu = () => setOpen(!isOpen);
return (
<header className="relative bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span className="h-8 w-auto sm:h-10">LOGO</span>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<button
onClick={toggleMenu}
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
>
Open
</button>
</div>
<nav className="hidden md:flex space-x-10">
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
About
</a>
</nav>
</div>
</div>
{isOpen && (
<div className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<span className="h-8 w-auto">LOGO</span>
</div>
<div className="-mr-2">
<button
onClick={toggleMenu}
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
>
X
</button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-y-8">
<a href="#" className="p-3 flex items-center rounded-md hover:bg-gray-50">
About
</a>
</nav>
</div>
</div>
</div>
</div>
)}
</header>
);
};
You will also likely need to handle the closing of the menu on route change.
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
const Navbar = () => {
const [isOpen, setOpen] = useState(false);
const toggleMenu = () => setOpen(!isOpen);
const router = useRouter();
useEffect(() => {
const closeMenu = () => isOpen && setOpen(false);
router.events.on("routeChangeStart", closeMenu);
return () => {
router.events.off("routeChangeStart", closeMenu);
};
}, [isOpen, router]);
return (
...see above example
Solution 2:[2]
Without knowing exactly what you are asking, this should set you down the right path, at least from a logic standpoint.
import React, { useState } from 'react'
import Image from 'next/Image'
function header() {
const [mobile__Header, setMobile__Header] = useState(false)
const showMobile__Header = (e) => {
if (e.target.className.includes('mobile')) {
setMobile__Header(true)
} else if (e.target.className.includes('desktop')){
setMobile__Header(false)
}
}
return (
<div>
<div className='absolute flex flex-col w-screen h-screen place-content-between bg-white text-black p-5 z-50'>
<div className='flex items-center justify-between'>
<div className='cursor-pointer'>
</div>
<div className={mobile__Header === true ? 'cursor-pointer-mobile' : 'remove-display'} onClick={showMobile__Header}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
<div className='flex'>
<div className='flex flex-col text-xl space-y-3'>
</div>
</div>
<div className='flex justify-between font-light'>
<div>
<a className="link" href="">EN</a>
</div>
<div className='flex flex-col'>
</div>
</div>
</div>
<header className="flex w- px-10 py-1 justify-between">
<div className="flex">
<div className="flex md:hidden cursor-pointer">
</div>
<div className="hidden md:flex cursor-pointer">
</div>
</div>
<div className="flex items-center">
<div className={mobile__Header === false ? 'cursor-pointer-desktop' : 'remove-display'} onClick={showMobile__Header}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<div className="space-x-4 px-5 py-5 hidden md:flex ">
</div>
</div>
</header>
</div>
)
}
export default header
Basically, make sure to differentiate between your mobile button and your desktop button using your classNames. Then, you set a bolean indicator depending on what is in the className. From there, you either display the correct container, or use a CSS class that simply puts display: none (in this case, I used the name remove-display. All that is done with an inline ternary operator.
Whether you are toggling a button, or toggling a whole container (a parent div that when display: none removes all the content inside), this approach works in both scenarios.
I am still confused as to what you are asking but my solution should get you going. You have an onClick function on two divs and the comments above each of those says are misleading. One says close icon and the other says menu icon toggle. I am not sure what we are toggling.
EDIT: Here is a much cleaner way to do it and it involved no className toggling. This will teach you what you are doing so you can actually toggle what you are trying to toggle:
import React, { useState } from 'react'
function header() {
const [isActivate, setActive] = useState(false)
const handleActivate = (e) => {
!isActivate ? setActivate(true) : setActivate(false)
}
return (
<div>
<div>
<h1 style={{cursor: 'pointer'}} onClick={handleActivate}>
{isActivate === true ? 'OPEN' : false}
</h1>
<h1 style={{cursor: 'pointer'}} onClick={handleActivate}>
{!isActivate ? 'CLOSE' : false}
</h1>
</div>
</div>
)
}
export default header
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 |