score:2
Accepted answer
according to the comments section, sidenav
is a child of app
component. so therefore, just pass down the state and state setter to sidenav
and from there, when an item
is clicked, just set menuopen
to false
or simply negate the state.
const app = (props) => {
return(
...
<sidenav menuopen={menuopen} setmenuopen={setmenuopen }/>
)
}
on sidenav:
<item to="/product-category/top/t-shirt" onclick={()=>{props.setmenuopen(!props.menuopen)}}> t - shirts </item>
Source: stackoverflow.com
Related Query
- How to make sidebar close when any link is clicked?
- How to make react-sidebar close when any link is clicked?
- how to make parent component pass prop to children only when button is clicked
- How to implement logout functionality when clicked on browser window or tab close in JavaScript?
- How to close react-burger-menu when link click in a component?
- How to make other button functions automatically run when a button is clicked
- how to revert (last clicked list item) back to its original color when any other item is clicked - react hooks
- How can I redirect a user to login when a certain link is clicked using JWT
- How to make a tab active when it is clicked on in React
- How to automatically close an open details tag when another detail is clicked with React?
- How do I add a title and close button to the top of a menu (above the 1st item in a button menu when clicked in material-ui?
- React + Material Design Lite - How to close navigation drawer when menu link is clicked?
- How to make an active navbar link when it shows its page using react-bootstrap
- How can I close my hamburger menu when clicking on a link using React JS? (using ReactJS hooks)
- Make a sidebar slide from the left side of the screen when a button is clicked with Tailwind CSS
- How can I make only one list item expand when a button is clicked in React (no hooks)?
- How to make a custom menu close when I click somewhere else other than the menu
- How to display image when any link is shared on Facebook, WhatsApp or any platform in reactjs
- Make sidebar slide in from the left when the button is clicked with TailwindCSS
- How best to stop Link component from redirecting when a delete icon is clicked
- How to empty the input fields of an array when clicked on close btn?
- How to make children clicked when clicking parent
- Reactjs: How to make all row checkbox checked true when material table is loaded and deselect when clicked and vice versa?
- How to add transition on closing Modal in React and how to close when clicked outside of the Modal?
- How to close sidebar when clicking link?
- React link (using react router) in sidebar when clicked multiple times causes url param to repeat
- How to make dropdown close or open when I click on the button when there is ref used? (React)
- How do I make sidebar automatically disappear once a menu item clicked
- Close Hamburger Menu When mobile menu Link is clicked
- How to close CSS only dropdown menu after click any link in dropdown?
More Query from same tag
- Route method from react-router-dom is not working
- Styled Component (button) not working with onClick
- How to Upload Images using React, fetch, and Django REST
- npm start and npm run build fail with npm ERR! code ELIFECYCLE
- Performance improvement to React Text Clamp?
- ReactJS, it won't rerender child component on state change
- I want the input data to go into the title and the textarea data to go into the content
- React - How to set default value in react-select
- React why my clearInterval cannot stop setInterval?
- How to avoid seen white background at the top?
- Should the action or store be responsible for transforming data when using React + Flux?
- How to show single hidden element of list and hide the rest
- Material-UI List side by side React
- React Native File constructor
- Show 10 events per page with paginate in React
- Using use-sound in React and Gatsby.js - How to stop audio playing on route change?
- Passing selected value of Dropdown into API in react
- add icon to header navBar (I am not getting that how to add icon on the most left in my NavBar)
- How do I get this to refer to the React component?
- ReactJs in static production: White page "Typeerror: Object(...) is not a function"
- React table sort icon gets pushed below the header
- Redux thunk: return promise from dispatched action
- Drop down div not appearing on button hover, also z-index having no effect
- When to load an async relation with Flux
- material-ui how to override nested styles
- How can I review OSS license status of node_modules in my app?
- Recursive component does not load the child in React
- How do I remove the outline for active state on a button in React Bootstrap?
- Connection problems between socket io client and server
- Adding new array object to a nested array in react redux reducer and array in store updates but not the react component