Close menu onClick in React

user_13774571 0
Viewed 1878

My goal: To close my Navbar when clicking on the button which is inside the Navbar.

I can't seem to get it to work - If anyone can explain to me what I'm doing wrong that would be great!

Here's my Navbar:

import React, { useState } from 'react';

export default function Navbar() {
    const [showNav, setShowNav] = useState(true)


  return (
    <div isOpen={showNav} className="w-48 bg-gray-200 h-screen py-10">
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
  )
}

Here is my App.js

import './App.css';
import Navbar from './components/Navbar';

function App() {

  return (
    <div className="flex">
      <Navbar />
    </div>
  );
}
export default App;
reactjs javascript
3 Answers

To achieve what you need, you can also use the condition like this: 

return (
<>
  {showNav && <div className="w-48 bg-gray-200 h-screen py-10">
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
   }
</>)

user_26898420

There is no such thing as isOpen property in div

If you want to hide the element rather than not render it

set display to none in style if showNav is false Like this:


import React, { useState } from 'react';

export default function Navbar() {
    const [showNav, setShowNav] = useState(true)


  return (
    <div style={{display: showNav ? 'initial' : 'none'}} className="w-48 bg-gray-200 h-screen py-10">
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
  )
}

Or use other way to hide an element (like visibility for example) see here ways of hiding an element in CSS

if you don’t wanna render it at all

Use Snehasish Karmakar‘s answer

user_59236660

const [showNav, setShowNav] = useState(true) change to const [showNav, setShowNav] = useState("block");

onClick={() => setShowNav(false)} change to onClick={() => setShowNav("hidden")};

user_50431410
Related