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;
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>
}
</>)There is no such thing as isOpen property in div
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
const [showNav, setShowNav] = useState(true) change to const [showNav, setShowNav] = useState("block");
onClick={() => setShowNav(false)} change to onClick={() => setShowNav("hidden")};