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