Eche un vistazo a mi código, el botón de alternancia funciona completamente bien, pero también quiero guardar el estado de alternancia en localStorage. Lo he intentado muchas veces antes, especialmente con Vanilla JS, pero soy muy nuevo en React y cada vez que lo intento. para guardar el valor en localStorage con useEffect hook, simplemente alterna entre los estados muy rápido y luego vuelve al estado original. Cualquier sugerencia será muy apreciada.
También aquí está el repositorio: https://github.com/AbidAlWassie/React-Portfolio-main
y aquí está el sitio completamente implementado: https://abidalwassie.github.io/React-Portfolio-main/
import React from 'react' import { useState, useEffect } from 'react' import { MdOutlineDarkMode } from 'react-icons/md' const Navbar = () => { const [scheme, setScheme] = useState(false); const [toggle, setToggle] = useState(false); useEffect(() => { document.body.classList.toggle('light', scheme); }, [scheme]); useEffect(() => { const navbar = document.getElementById("navbar"); navbar.classList.toggle("open", toggle); }, [toggle]); return ( <nav className='navbar' id='navbar'> <div className="container flex justify-between items-center mx-auto text-center"> <div className='my-logo'> <div className='circle'><span className="firstLetter">A</span><div className="half-circle"></div></div> <span className="otherLetters" draggable="false">bid</span> </div> <div className="nav-holder"> <ul className='nav-list'> {[ 'home', 'about', 'skills', 'services', 'work', 'contact' ].map((item) => ( <li className='nav-link' key={`link-${item}`}> <a href={`#${item}`} draggable="false"> {item}</a> </li> ))} </ul> </div> <button className='toggleBtn' id='toggleBtn' onClick={()=> setScheme(!scheme) }> <MdOutlineDarkMode/> </button> <div className='menuBtn hamburger' onClick={()=> setToggle(!toggle) }> <div className="bar"></div> <div className="bar"></div> <div className="bar"></div> </div> </div> </nav> ) } export default NavbarDebe establecer el valor del esquema en useState desde localStorage para inicializar la próxima vez, agregue el código a continuación en la parte superior,
const localTheme = JSON.parse(localStorage.getItem('key_name')) || false; const [scheme, setScheme] = useState(localTheme);Y necesita almacenar en useEffect en localStorage
useEffect(() => { document.body.classList.toggle('light', scheme); localStorage.setItem('key_name',scheme); }, [scheme]);