What type is passed to functions from `onClick`?

I have some javascript that looks like this:

const menu = (
        <Menu onClick={handleMenuClick}>
            {menuItems.map((item) => (
                <Menu.Item key={item.key} icon={item.icon} style={styles.item}>
                    <span style={{ marginLeft: "5px" }}>{item.value}</span>
                </Menu.Item>
            ))}
        </Menu>
    )

With the key piece being the handleMenuClick

That function is defined as:

    const handleMenuClick = (event) => {
        console.log(event.key)
        console.log(typeof (event.key))
    }

However, I’m not sure what type the event is, and how it’s getting the key value?

Additionally, when I try this in typescript, it looks like its a Synthetic event. However, I try to access the key value with e.target.value and I keep getting errors.

So I’m not sure what I’m not understanding

>Solution :

When you have a TS function that takes a callback, and you want to define the callback elsewhere but aren’t sure of the right typing to use, first write the function inline with the callback, and use an IDE that can tell you the types of variables. Then look at the type of the variable:

Then copy that type when defining a standalone callback that you can pass in.

This works not only for onClick in React, but for any situation where you’re dealing with a callback you don’t know the proper type for.