Hay un botón que cuando se hace clic en él cambia un valor. Según este valor, el botón tiene un icono u otro icono.
Aquí está el código:
export const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); const toggle = useCallback(() => setState((state) => !state), []); return [state, toggle]; }; export function Sidebar({ isOpenedInitial }: SidebarProps) { const [isOpened, setSidebarState] = useToggle(isOpenedInitial); ... return ( <div> <button onClick={setSidebarState}>{isOpened ? <OneIcon /> : <AnotherIcon />}</button> ... ) }Funciona pero tiene una línea roja debajo de la palabra onClick que dice lo siguiente:
Escriba 'booleano | (() => void)' no se puede asignar al tipo 'MouseEventHandler | indefinido'. El tipo 'falso' no se puede asignar al tipo 'MouseEventHandler | indefinido'
Busqué en Google este mensaje, encontré una pregunta al respecto aquí donde la respuesta aceptada dice cambiar de onClick={setSidebarState} a onClick={() => setSidebarState} .
Se realizó el cambio, ya no hay advertencia pero el botón ya no funciona. Le doy click y no pasa nada.
¿Algunas ideas?
Si marca el valor de retorno de useToggle como const, inferirá el tipo correcto del segundo elemento de la matriz
export const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); const toggle = useCallback(() => setState((state) => !state), []); return [state, toggle] as const; }; export function Sidebar() { const [isOpened, setSidebarState] = useToggle(); return ( <div> <button onClick={setSidebarState}>{isOpened ? ... : ...}</button> </div> ); }Ahora, debe decir explícitamente que setSideBarState es una función, por lo que debe poner setSideBarState()