Button onClick doesn't work with useToggle hook-CodePudding

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?

CodePudding user response：

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>
  );
}

CodePudding user response：

Now, you need to explicit say that setSideBarState is a function, so you need to put setSideBarState()