Close menu onClick in React

Question

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;

Answer 1

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>
   }
</>)

Answer 2

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