'Types of parameters 'event' and 'event' are incompatible
I have a project, which is an employee monitoring project, and it has several components, and among these components is having a group of buttons together.
I have a set of buttons, and I call these buttons in another component, but when I write the code, I have this one error.
Type '(event: React.MouseEvent<Document, MouseEvent>) => void' is not assignable to type '(event:
MouseEvent | TouchEvent) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'MouseEvent | TouchEvent' is not assignable to type 'MouseEvent<Document, MouseEvent>'.
Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Document,
MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persi
st
How can I fix it?
And this file has the design of the buttons and gave them their own style
And when I activated this file it gave me this error which is above.
const options = ['Member', 'Admin'];
export default function SplitButton() {
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef<HTMLDivElement>(null);
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleClick = () => {
console.info(`You clicked ${options[selectedIndex]}`);
};
const handleMenuItemClick = (
event: React.MouseEvent<HTMLLIElement, MouseEvent>,
index: number,
) => {
setSelectedIndex(index);
setOpen(false);
};
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event: React.MouseEvent<Document, MouseEvent>) => {
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
return;
}
setOpen(false);
};
// @ts-ignore
return (
<Grid container direction="column" alignItems="center">
<Grid item xs={12}>
<ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split
button">
<Button onClick={handleClick}>{options[selectedIndex]}</Button>
<Button
color="primary"
size="small"
aria-controls={open ? 'split-button-menu' : undefined}
aria-expanded={open ? 'true' : undefined}
aria-label="select merge strategy"
aria-haspopup="menu"
onClick={handleToggle}
>
<ArrowDropDownIcon />
</Button>
</ButtonGroup>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition
disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin: placement === 'bottom' ? 'center top' : 'center
bottom',
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList id="split-button-menu">
{options.map((option, index) => (
<MenuItem
key={option}
disabled={index === 2}
selected={index === selectedIndex}
onClick={(event) => handleMenuItemClick(event,
index)}
>
{option}
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Grid>
</Grid>
);
}
Solution 1:[1]
Try changing your handleClose
method to:
const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
return;
}
setOpen(false);
};
Why?
The error message says that your handleClose
method is not compatible with what ClickAwayListener
can accept as input for its onClickAway
callback.
Currently, your handleClose
has the signature
(React.MouseEvent<Document, MouseEvent>) => void
while what is expected by ClickAwayListener
's onClickAway
is
(MouseEvent | TouchEvent) => void
Solution 2:[2]
try this
event:(MouseEvent | TouchEvent) => void
Solution 3:[3]
Had the same problem myself. Looks like MouseEvent needs its template argument of HTMLElement
function onMenuClick(e: MouseEvent<HTMLElement>): void {
console.log('got the click');
}
That took care of the warning. Let me know if you are still having trouble.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Naveen Kashyap |
Solution 3 | Atifm |