I am trying to get a code from vanilla js with bootstrap and use react hooks on yet. I watched some videos on youtube about useState and useReff, however, these concepts still are a bit confusing when I try to apply them in my projects.
I am trying to convert a toggle function in vanilla to react hooks. Can you please guide me on how to start thinking to change this code?
Thanks in advance.
Vanilla:
window.addEventListener("DOMContentLoaded", (event) => {
// Toggle the side navigation
const sidebarToggle = document.body.querySelector("#sidebarToggle");
if (sidebarToggle) {
if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
document.body.classList.toggle('sb-sidenav-toggled');
}
sidebarToggle.addEventListener("click", (event) => {
event.preventDefault();
document.body.classList.toggle("sb-sidenav-toggled");
localStorage.setItem(
"sb|sidebar-toggle",
document.body.classList.contains("sb-sidenav-toggled")
);
});
}
});
React:
const [inactive, setInactive] = useState(false);
useEffect(() => {
})
useEffect is fired after Components have been painted so no need to call DOMContentLoaded event listener
const Component = (e) => {
const [inactive, setInactive] = useState(false);
useEffect(() => {
// insert code here
}, [inactive]);
}
You can do something like this :
import { useState, React } from 'react';
const YourComponent = () => {
// isSidebarOpen: value, setIsSidebarOpen: setter, false by default.
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const toggleSideBar = () => {
// true -> false / false -> true
setIsSidebarOpen(!isSidebarOpen);
}
return (
<YourButton onClick={toggleSideBar}>
Text
</YourButton>
);
};