React Hooks clickhandler to children - reactjs

Question

Hello I have a clickhandler that I send to a child component and use it on onclick, but for some reason, my click handler event on my parent component is not running
parent jsx:
type ClickHandler = (tag: ITag) => (e: MouseEvent) => void
const MenuTags: React.FC<{hover: boolean}> = observer(({hover}) => {
const {layoutStore} = useRootStore()
const [tags, setTags] = useState<ITag[]>(Tags)
const showHideDropItem: ShowHideDropItem = (tag) => {
console.log(tag)
setTags((items) =>
items.map((item) => ({
...item,
Active: item.Name === tag.Name ? tag.Active !== true : false,
})),
)
}
const clickHandler: ClickHandler = (tag) => (e) => {
console.log('a')
e.preventDefault()
showHideDropItem(tag)
}
return (
<MenuList
open={layoutStore.sideBar || layoutStore.onHoverSideState}
hover={hover}
>
{tags.map((item) => (
<div key={JSON.stringify(item.Name)}>
{item.Title ? <div className="title_tagList">{item.Title}</div> : ''}
<TagList
open={layoutStore.sideBar || layoutStore.onHoverSideState}
tag={item}
clickHandler={clickHandler}
/>
</div>
))}
</MenuList>
)
})
my children jsx:
const TagList: React.FC<ITagList> = observer(({tag, clickHandler, open}) => {
const tagHandleClick = (e: any) => {
e.preventDefault()
if (tag.Active !== undefined) clickHandler(tag)
}
return (
<ListItem open={open} isDropDown={!!tag.DropdownItems} active={tag.Active}>
<div className="tag-container">
<NavLink
className="tag-wrapper"
to={tag.Link}
onClick={tagHandleClick}
>
<tag.Icon className="svg-main" size={22} />
<span className="tag-name">{tag.Name}</span>
</NavLink>
</div>
</ListItem>
)
})
when clicking on my event it enters my handler of the child component, but the handler does not call my parent component's handler

Answer 1

Your clickHandler is a function that returns a function. It might be easier to see if you temporarily rewrite it like this:
const clickHandler: ClickHandler = (tag) => {
return (e) => {
console.log("a")
e.preventDefault()
showHideDropItem(tag)
}
}
Instead of returning a function you could just do the logic of the inner function directly instead.
const clickHandler: ClickHandler = (tag) => {
console.log('a')
showHideDropItem(tag)
}