Tengo un div con un botón de cierre. Actualmente, lo que hace es que cuando el usuario hace clic en el botón de cerrar, el div desaparece. Pero cuando el usuario actualiza la página, el div todavía está allí. Estoy pensando en usar localstorage pero estoy confundido en cuanto a cómo debería incorporarse cuando estoy usando useState. Aquí está mi código.
const [isVisible, setIsVisible] = useState(true) useEffect(() => { let hideDiv = localStorage.getItem('hideDiv ') if (!hideDiv ) { setIsVisible(true) localStorage.setItem('hideDiv ', 1) } }, []) if (!isVisible) return null <div className="absolute right-5 text-gray flex text-white"> <a href="#" onClick={() => setIsVisible(false)}> x </a> ... some text here ... </div>Mi idea actual es useEffect y localstorage, pero considerando que soy completamente nuevo en React, no estoy tan seguro de cómo hago esto, ya que solo intenté ocultar y mostrar elementos usando localstorage en Vanilla javascript
useEffect con una matriz de dependencia vacía se activará una vez cuando se monte el componente. Este es un buen lugar para obtener ese valor del almacenamiento local y establecerlo en el estado. Luego, su función de cierre puede simplemente establecer el almacenamiento local en verdadero.
Hice un sandbox para ti aquí: https://codesandbox.io/s/crazy-davinci-io03f?file=/src/App.js
Probablemente también deberías inicializar tu estado en false . Esto evitará ese parpadeo que ves.