Cacher is the code snippet organizer for pro developers

import { ContextMenu } from "./contextMenu";

// ...

    public render() {

// ...

        const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {
            e.persist();
            e.preventDefault();
            this.setState({ e } as any);
        };

        const menu = this.state.e ? this.renderContextMenu(this.state.e) : null;
        const root = React.cloneElement(element, { onContextMenu });
        return (
            <React.Fragment>
                {root}
                {menu && (
                    <ContextMenu menu={menu} offset={{ left: this.state.e.clientX, top: this.state.e.clientY }} />
                )}
            </React.Fragment>
        );
    }
}

// ...

import { Portal } from "../portal/portal";

// ...

export interface IContextMenuProps {
    // Move fields in state to props so that the fields can be passed by ContextMenuTarget components
    menu?: JSX.Element;
    offset?: IOffset;
    // ...

}

// ...

export class ContextMenu extends AbstractPureComponent<IContextMenuProps, IContextMenuState> {

    // ...

    public render() {
        const content = <div onContextMenu={this.cancelContextMenu}>{this.props.menu}</div>;

        // ...
    
        return (
            // Wrapping with Portal
            <Portal>
                <div className={Classes.CONTEXT_MENU_POPOVER_TARGET} style={this.props.offset}>
                    <Popover
                        
                    // ...

                    </Popover>
                </div>
            </Portal>
        );
    }

// ...