CODEWITHSUNDEEP
javascriptreactjstypescriptreact-hooksonclick
Leo Messi
Leo Messi

Reputation: 6176

Button onClick doesn't work with useToggle hook

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?

Upvotes: 1

Views: 376

Answers (2)

jmk
jmk

Reputation: 1610

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

Upvotes: 2

Jack Torres
Jack Torres

Reputation: 78

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

Upvotes: 0

Related Questions