Estoy tratando de obtener un código de vanilla js con bootstrap y todavía uso ganchos de reacción. Vi algunos videos en youtube sobre useState y useReff, sin embargo, estos conceptos todavía son un poco confusos cuando trato de aplicarlos en mis proyectos.
Estoy tratando de convertir una función de alternar en vainilla para reaccionar ganchos. ¿Puede por favor guiarme sobre cómo comenzar a pensar en cambiar este código?
Gracias por adelantado.
Vainilla:
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") ); }); } });Reaccionar:
const [inactive, setInactive] = useState(false); useEffect(() => { })useEffect se activa después de que se hayan pintado los componentes, por lo que no es necesario llamar al detector de eventos DOMContentLoaded
const Component = (e) => { const [inactive, setInactive] = useState(false); useEffect(() => { // insert code here }, [inactive]); }Puedes hacer algo como esto:
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> ); };