fkhadra
Getting warning about triggerEvent and propsFromTrigger
Do you want to request a feature or report a bug? Bug
What is the current behavior?
I'm getting "React does not recognize the triggerEvent prop on a DOM element." or react_devtools_backend.js:2557 Warning: React does not recognize the propsFromTrigger prop on a DOM element.
What is the expected behavior? No warnings
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? "react": "17.0.2". Never used other versions
Warning: React does not recognize the triggerEvent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase triggerevent instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the propsFromTrigger prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase propsfromtrigger instead. If you accidentally passed it from a parent component, remove it from the DOM element.
any help?
Hello. Did you solve this problem, I also encountered the same problem
Nope, used this lib on another project and I got the same issue :\
This happens to me also in
- win 10
- react 18.2.0
- react-contexify": "^6.0.0
This happens when useEffect is used to set the content of the menu.
EDIT: I solved this by making sure the content is inside Item tags. I for example added a spinner component inside div to menu and when ready the actual items wrapped inside <div></div>. This works but it produces this error. So I had like this:
export function ContextMenu(props: ContextMenuProps) {
const [content, setContent] = useState<ReactNode | undefined>(undefined);
const someStatus = useSelector(selectSomeStatus);
useEffect(() => {
if (someStatus === 'pending') {
setContent(
<div className='d-flex justify-content-center'><SomeSpinner/></div>);
} else {
const items = getMenuItems().
map(item => <Item key={item.key} onClick={() => item.action()}>{item.key}</Item>);
setContent(<div>{items}</div>);
}
}, [someStatus]);
return (
<Menu id={props.menuId}>
{content}
</Menu>
);
}
When I removed the divs in BOTH cases I got rid of the error:
useEffect(() => {
if (someStatus === 'pending') {
setContent(
<Item className='d-flex justify-content-center'><SomeSpinner/></Item>);
} else {
const items = getMenuItems().
map(item => <Item key={item.key} onClick={() => item.action()}>{item.key}</Item>);
setContent(items);
}
}, [someStatus]);
