score:0
i used onclick
in my custom button. and toggled the state by doing
const toggleoffcanvas = () => setshow(!show)
example:
function togglesidebaroffcanvas(){
const [show, setshow] = usestate(false);
const toggleoffcanvas = () => {
setshow(!show);
};
return (
<button onclick={toggleoffcanvas}>
menu
<sidebaroffcanvas show={show} toggleoffcanvas={toggleoffcanvas} />
</button>)
}
function sidebaroffcanvas({ show, toggleoffcanvas }) {
return (
<offcanvas classname="w-25" show={show} scroll={true} backdrop={false}>
<offcanvas.header
classname="p-0"
style={{
backgroundcolor: "#008069",
color: "white",
}}
>
<offcanvas.title>
<div
classname="d-flex align-items-end w-100 mb-2 lh-1"
>
<div classname="p-2" onclick={toggleoffcanvas}>
<fiarrowleft />
</div>
<h5 classname="ms-3">profile </h5>
</div>
</offcanvas.title>
</offcanvas.header>
<offcanvas.body>
<div >
...
</div>
</offcanvas.body>
</offcanvas>
);
}
Source: stackoverflow.com
Related Query
- react bootstrap offcanvas custom close button
- react bootstrap - adding custom bsStyle property to button
- I'm trying to close the offcanvas menu in React Bootstrap when I click a link
- How to use custom element as dropdown button in React Bootstrap
- React bootstrap 4 modal window close button bad formatting
- React Material UI: How to give a button a custom color when disabled?
- React Bootstrap - How to manually close OverlayTrigger
- Closing React Semantic UI modal with button and close icon
- React Bootstrap + Formik - show errors after I click submit button
- Semantic react ui Popup close button
- React Player add custom play button and overlay img
- Bootstrap cdn overrides my custom css styles in react js
- Creating a Custom Button in React Typescript and add onClick Event
- ant design - Modal value reset on "cancel" and "X" close button - API RESPONSE BASE REACT JS
- Creating custom Input type file button in React
- Close react button dropdown menu on clicking or hovering outside of menu area
- React Alert Component close button self close
- React Bootstrap custom checkbox without id?
- Close Modal in UI React on Cancel button
- OnClick not working when rendering React button on a custom dialog
- React component self close on button click
- Cannot create custom style with React and Bootstrap
- How to add export functionality to custom button in React highcharts?
- React Bootstrap - spinner and button in one line
- react bootstrap table button conflict with row clicking
- Submit a react form without clicking a button - React Bootstrap
- React Bootstrap - Adding logic to a button
- Centering Modal Title and button in React Bootstrap
- React Bootstrap - Close NavDropdown on route change
- React router prevent route change and close popup on back button
More Query from same tag
- What mean "form submitting canceled"?
- ReactJS and axios, issues accessing nested objects from JSON response
- react component not rerendering when props change
- React route not matching query string
- Why cant I separate <Switch> to a different module?
- Where does the function Argument comes from?
- bootstrap-datepicker with React: onChange doesn't fire while onClick does
- Using React's Hooks useReducer, the state is not "single source of truth"? How does the App or Sibling get the state of other components?
- Firebase - Best Practice For Server Firestore Reads For Server-Side Rendering
- display <div> with embedded <Link> inline with surrounding text
- React Conditionally show image using switch statement not working
- Array.find returns TypeError / right use of params
- useForm is called in function which is neither a React function component... error
- How to store a favourite pet for a logged in user?
- Comment JSX code in Sublime and atom
- React botstrap date picker - customization
- Material UI Custom theme color assign Typescript
- material-ui makeStyles: how to style by tag name?
- Formik + Yup: How to immediately validate form before submit?
- REDUX. I cant understand how to connect a component defined as a class extending React.Component in order to read the store
- How can I declare media queries inside styled components as an object to assign to style?
- React deploy fails in CSS file
- How can I iterate through a dictionary in React to get the values separately and display using html?
- What is the purpose of a double-pipe in an object in React
- React useEffect doesn't trigger fetch when rendering component
- Each child in an array or iterator should have a unique "key" prop (Using Rails with React )
- React this.props.match is undefined
- Is it possible to have conditional columns in a List/DataGrid in Admin on REST?
- How to save an image and download it in ReactJS?
- When Using MUI Button: TypeError: Cannot read property 'borderRadius' of undefined