JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.0/jstree.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.0/themes/default/style.min.css">
<div id="tree"></div>

JavaScript

function customMenu(node) {
    // The default set of all items
    var items = {
        createItem: { // The "create" menu item
            label: "Create",
            action: function () {
                this.create(node);
            }
        },
        renameItem: { // The "rename" menu item
            label: "Rename",
            action: function () {
                this.rename(node);
            }
        },
        deleteItem: { // The "delete" menu item
            label: "Delete",
            action: function () {
                this.remove(node);
            }
        }
    };
    
    if ($(node).hasClass("folder") || $(node).hasClass("jstree-closed") || $(node).hasClass("jstree-open")) {
        delete items.deleteItem;
        delete items.renameItem;
    }
    
    else{
        delete items.createItem;
    }
    
    return items;
}

$('#tree').jstree({
    'core': {
        'data': [
            { "id": "ajson1", "parent": "#", "text": "Folder 1", "state": {"opened": true} },
            { "id": "ajson2", "parent": "ajson1", "text": "File 1" },
            { "id": "ajson3", "parent": "ajson1", "text": "File 2" }
        ]
    },
    "plugins": [ "contextmenu" ],
    "contextmenu": {items: customMenu}
});