There is a button that when click it toggles a value. Based on this value, the button has an icon or another icon.
Here is the code:
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>
...
)
}
It works but it has a red line under onClick word which says the following:
Type 'boolean | (() => void)' is not assignable to type 'MouseEventHandler | undefined'. Type 'false' is not assignable to type 'MouseEventHandler | undefined'
I've googled this message, found a question about it here where the accepted answer states to change from onClick={setSidebarState} to onClick={() => setSidebarState}.
The change was made, there is no warning anymore but the button doesn't work now. I click on it and nothing happens.
Any ideas?
If you mark return value of useToggle as const it will infer correct type of second element of array
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>
);
}
Now, you need to explicit say that setSideBarState is a function, so you need to put setSideBarState()