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

Related Query

More Query from same tag