score:1
create a button to open, outside the if.
heres the code
import react, { usestate } from "react";
export default function navbar() {
const [shownav, setshownav] = usestate(true);
return (
<>
{!shownav && (
<button
classname="bg-primary w-32 h-12 rounded-lg text-white"
onclick={() => setshownav(true)}
>
open navbar
</button>
)}
{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>
)}
</>
);
}
if you want you can make it one button only as well, just add some styling or a container wrapping everything up.
return (
<>
<button
classname="bg-primary w-32 h-12 rounded-lg text-white"
onclick={() => setshownav(shownav)}
>
{shownav ? "close navbar": "opennavbar"}
</button>
{shownav && (
<div classname="w-48 bg-gray-200 h-screen py-10">
<h1>dashboard</h1>
<h2>menu item</h2>
<h2>menu item</h2>
<h2>menu item</h2>
</div>
)}
</>
);
score:2
just use one state for opening and closing the navbar and pass it down from app.js to your navbar.
navbar:
import react, { usestate } from 'react';
export default function navbar({shownav, setshownav}) {
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>
}
</>
)
}
app.js
import './app.css';
import navbar from './components/navbar';
import { usestate } from 'react';
function app() {
const [shownav, setshownav] = usestate(true)
return (
<>
<div classname="flex">
<navbar shownav={shownav} setshownav={setshownav} />
<button classname="bg-primary w-32 h-12 rounded-lg text-white" onclick={() => setshownav(true)}>open navbar</button>
</div>
</>
);
}
export default app;
Source: stackoverflow.com
Related Query
- Open NavBar on button click
- How to open a page in new tab on click of a button in react? I want to send some data to that page also
- ReactJS Ant Design - Open DatePicker on button click
- Gatsby open modal window on button click
- Is there any method to open page using a React Router v6 on button click
- React way to open a NavBar onClick on a button
- How to open an <input type="file"/> with a button click in React
- how to open datepicker on button click or icon click in react js
- How to open a new page with specific dataset with a button click in react?
- how to open a dialog in material-ui on button click
- How to redirect to log in page after click logout button on navbar header in React?
- When i click one button its open all buttons simultaneously
- Open new page on click of button in react
- when i click on update button i want the course open in add course with the same values
- Reactjs: Dialog open is not working on button click
- The action menu is not getting closed even if I click somewhere on page, the menu remains open until I explicitly click on the Action button again
- How to make open url on click on button in reactjs
- Can I open a jw modal (imported from jw-react-modal) in reactjs without button click
- How to Open React Native Expo Camera On Button Click
- React 16 Hidden button Modal does not open on click
- Open a div element on a button click with ReactJS
- create and open a pdf on a click of link and show print button with react-pdf
- How to open a component in full screen on click of a button in react js?
- When i click in logout button open a confirm alert. When i cancel it will redirect login page but i want to redirect current page. How i can do it?
- I tried to open new window on button click in Electron.js but Uncaught ReferenceError: require is not defined
- Trying to open modal on button click
- React fluent ui open a component when i click a certain button
- How to make dropdown close or open when I click on the button when there is ref used? (React)
- How to open Bootstrap Modal from a button click in React
- How do I add a transition to my navbar menu in react when I click the toggle button
More Query from same tag
- Array not rending correctly into a list
- How to correctly update state in array using react?
- Formik FieldArray nested object validations with Yup
- React useEffect vatibles are not defined outside the funtion
- override antd component style/className
- How to dynamically decide to pass a prop to a react component or not?
- Can't resolve 'chart.js/auto'
- How to use font-face font family in react component render?
- How to add a parameter to an API call function in react
- How to integrate React app into Wordpress (react router)?
- mapStateToProps function , targeting id of the post instead of all the posts
- Why do I have an error: 'Actions must be plain objects. Use custom middleware for async actions.' when using redux?
- Nested class in another selected class with makeStyles
- useEffect() triggers components re-render in one function but not in the other one. Both function DO change state. What am I missing?
- Is it a good practise to inject properties into ReactJS functional components using literal dot notation setters?
- Create React App with bootstrap css
- Found non-callable @@iterator in reactjs store
- WebSocket prop won't be propagated to functional component
- eslint `forbid-prop-types` rule cause a warning in firefox console window
- Apollo Client 400 Error - bundle.esm.js:60 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400
- How to write a test if React-Error-Boundary recovers from error?
- Formik with react-day-picker
- getting this TypeError: Cannot read property 'map' of undefined
- How can I setState with setInterval after received data from API in React
- How to use Font Awesome Icons with Text using ternary operator in React JS?
- Storing data from axios to use it later via util functions
- How to get React to Stop watching the state of a parent object?
- How can I import multiple functions or components from a package using react lazy
- react hooks (useEffect) infinite loop clarification
- How to change Button Color onClick Material-UI, React