Here is the code that uses react-contexify for displaying context menu in react app.

Message.js

import React, { Component } from 'react';

import { ContextMenu, Item, Separator, Submenu, ContextMenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';

const ContextMenuItems = props => (
    <ContextMenu id='menu_id'>
        <Item onClick={props.onClick}>Edit</Item>
        <Separator />
        <Submenu label="Set Reminder" arrow={<i className="material-icons">&#xE315;</i>}>
            <Item onClick={props.onClick}>Me</Item>
            <Submenu label="Others" arrow={<i className="material-icons">&#xE315;</i>}>
                <Item onClick={props.onClick}>Family</Item>
                <Item onClick={props.onClick}>Friends</Item>
                <Item onClick={props.onClick}>Foodies</Item>
                <Item onClick={props.onClick}>Jen</Item>
                <Item onClick={props.onClick}>Margaret</Item>

            </Submenu>
        </Submenu>
        <Separator />
    </ContextMenu>
);

class Message extends Component {
    onClick = ({ event, ref, data, dataFromProvider }) => console.log('Hello');    
    
    render() {
        const {message} = this.props;

        return (
            <div>
                <ContextMenuProvider id="menu_id">
                    <label className="event-content">
                        This is a context menu
                    </label>
                </ContextMenuProvider>
                <ContextMenuItems onClick={this.onClick}/> 
            </div>
        );
    }
}

export default Message;