Closing Hamburger menu in React - html

Question

i'm trying to close the hamburger menu onClick with react, but so far have no results :( Read a lot of similar questions here, but everyone html is different and none of the answers worked for me :( Here's the code, i know it should be done with with useState, but how can i do it ? It's the first condition, the second is just a search input for the start page
return (
<>
{city ?
<nav>
<input id="nav-toggle" type="checkbox" />
<div className="nav-input">
<form method='POST' type="text" className='form' onSubmit={searchLocation}>
<input className="form-input" name='city' placeholder='Enter your location ...' />
<button type="submit" class="search-button">
<img src={search} />
</button>
</form>
</div>
<ul className="links">
<li><NavLink to="/now" style={({ isActive }) =>
isActive ? active : undefined
}>Now</NavLink></li>
<li><NavLink to="/hourly" style={({ isActive }) =>
isActive ? active : undefined
}>Hourly</NavLink></li>
<li><NavLink to="/daily" style={({ isActive }) =>
isActive ? active : undefined
}>Daily</NavLink></li>
</ul>
<label htmlFor="nav-toggle" className="icon-burger">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</label>
{city ?
<div className='city-name'>
<p>weather at: </p>
<h4>{city}</h4>
</div>
: null}
</nav>
:
<>
<div className='nav-start-page'>
<div>
<h3>Get Your Forecast</h3>
</div>
<div>
<Link className='location-link' to="/location">
<img src={location} />
</Link>
</div>
<div>
<form method='POST' type="text" onSubmit={searchLocation}>
<input className="form-input" name='city' placeholder='Enter your location ...' />
<button type="submit" class="search-button">
<img src={search} />
</button>
</form>
</div>
</div>
</>
}
</>
);
};

Answer 1

Add a click event on hamburger menu and set menu list hidden by default from css
i.e; visiblity: hidden. And on menu click function get menu list div by id from js and set their css visiblity: visible

Answer 2

Use useState and a callback function to toggle the hamburger menu onClick.
Try this:
const [isOpen, setIsOpen] = useState(false);
return (
<>
{city ?
<nav>
<input id="nav-toggle" type="checkbox" onClick={() => setIsOpen(!isOpen)} />
<div className="nav-input">
<form method='POST' type="text" className='form' onSubmit={searchLocation}>
<input className="form-input" name='city' placeholder='Enter your location ...' />
<button type="submit" class="search-button">
<img src={search} />
</button>
</form>
</div>
{isOpen && <ul className="links">
<li><NavLink to="/now" style={({ isActive }) =>
isActive ? active : undefined
}>Now</NavLink></li>
<li><NavLink to="/hourly" style={({ isActive }) =>
isActive ? active : undefined
}>Hourly</NavLink></li>
<li><NavLink to="/daily" style={({ isActive }) =>
isActive ? active : undefined
}>Daily</NavLink></li>
</ul>}
<label htmlFor="nav-toggle" className="icon-burger">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</label>
{city ?
<div className='city-name'>
<p>weather at: </p>
<h4>{city}</h4>
</div>
: null}
</nav>
:
<>
<div className='nav-start-page'>
<div>
<h3>Get Your Forecast</h3>
</div>
<div>
<Link className='location-link' to="/location">
<img src={location} />
</Link>
</div>
<div>
<form method='POST' type="text" onSubmit={searchLocation}>
<input className="form-input" name='city' placeholder='Enter your location ...' />
<button type="submit" class="search-button">
<img src={search} />
</button>
</form>
</div>
</div>
</>
}
</>
);
};