Function onClick callback parameter type

Viewed 40

I am starting with TS and I have problem with setting function from onClick handler. In what way I should specify the type to make it work?

callback handler function

const setSearchBarActive = () => {
  setActive(true);
};

TS error

Type 'boolean | (() => void)' is not assignable to type 'MouseEventHandler<SVGSVGElement> | undefined'.
  Type 'boolean' is not assignable to type 'MouseEventHandler<SVGSVGElement>'.ts(2322)
index.d.ts(1479, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & FontAwesomeIconProps'

React code

export default function Searchbar() {
  const { isDarkMode } = useContext(DarkModeContext);
  const [active, setSearchBarActive] = useSearchbar();

  return (
    <SearchbarContainer isDarkMode={isDarkMode}>
      <FontAwesomeIcon icon={faSearch} onClick={setSearchBarActive} />
      <SearchbarInput type="text" isDarkMode={isDarkMode} />
    </SearchbarContainer>
  );
}
1 Answers

This should solve the issue, you have to ensure the types of the custom hooks properly.

onClick={(e:MouseEvent)=>{setSearchBarActive()}}
Related