Button onClick doesn't work with useToggle hook

Question

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?

in your onClick, you're missing brackets: onClick={() => setSidebarState()} — Pradip Dhakal
– Pradip Dhakal, Commented Nov 11, 2021 at 13:41
@PradipDhakal Ive tried like that and it says: This expression is not callable. Not all constituents of type 'boolean | (() => void)' are callable. Type 'false' has no call signatures. — Leo Messi
– Leo Messi, Commented Nov 11, 2021 at 13:42

jmk · Accepted Answer · 2021-11-11 13:42:43Z

2

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

answered Nov 11, 2021 at 13:42

jmk

1,6308 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Torres · Accepted Answer · 2021-11-11 13:37:35Z

0

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

answered Nov 11, 2021 at 13:37

Jack Torres

781 gold badge1 silver badge7 bronze badges

5 Comments

Leo Messi Over a year ago

you mean onClick={setSidebarState()} ?

Jack Torres Over a year ago

Nope, onClick={() => setSidebarState()}, using arrow function.

Leo Messi Over a year ago

I've tried like that and has this error message: This expression is not callable. Not all constituents of type 'boolean | (() => void)' are callable. Type 'false' has no call signatures.

Jack Torres Over a year ago

🤔, wait, I'm looking for.

Jack Torres Over a year ago

You need to use "useToggle" or just wanting to learn about it?

Collectives™ on Stack Overflow

Button onClick doesn't work with useToggle hook

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related