Tengo un pequeño componente Preact en el que quiero alternar la visibilidad de un div, pero no funciona como se esperaba. Lo siguiente recrea el problema:
import { h, render } from 'preact'; import { useState } from 'preact/hooks'; function App() { const [isOpen, setIsOpen] = useState(true); function toggle() { console.log('toggle'); setIsOpen(!isOpen); } console.log(isOpen); if (isOpen) { return ( <div> <div onClick={toggle}>Close</div> </div> ); } else { return <div onClick={toggle}>Open</div>; } } render(<App />, document.body);Pero no funciona como esperaba. La salida de la consola es la siguiente:
true toggle false toggle trueLas dos primeras líneas son del renderizado inicial. Todo lo demás sucede cuando hago clic en Cerrar. Esperaría que Cerrar cambie a Abrir y que la salida de la consola sea la siguiente cuando haga clic en Cerrar:
toggle falseYo uso esto para construir:
esbuild ./tmp.tsx --bundle --watch --minify --outdir=./ --jsx-factory=h --jsx-fragment=Fragmenty el html es
<html> <body> <script async src="tmp.js"></script> </body> </html>¿Que esta pasando aqui?