JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
<!--
Include jQuery
jsTree requires 1.9.0 or greater in your webpage. You can use a CDN version or include a local copy.

Include jsTree
If hosting the files yourself: for production include the minified version: dist/jstree.min.js, there is a development version too: dist/jstree.js
->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
-->
<!--
Setup a container
This is the element where you want the tree to appear, a <div> is enough. This example has a nested <ul> as there is no other data source configured (such as JSON).-->
<h1>
Tree: without check_callback
</h1>
<div>
  <div id="jstree_demo_div"></div>
  <div target="rename_node" class="rename_node">
    Rename selected node [rename_node method], does not work.
  </div>
  <div class="set_text">
    Rename selected node [set_text method]
  </div>
</div>
<h1>
Tree: with check_callback
</h1>
<div>
  <div id="jstree_demo_div2"></div>
  <div class="rename_node">
    Rename selected node [rename_node method], works!
  </div>
  <div class="set_text">
    Rename selected node [set_text method]
  </div>
</div>

CSS

.rename_node,
.set_text {
  padding: 10px;
  background-color: orange;
  margin-top: 20px;
  cursor: pointer
}

.rename_node {
  background-color:lime;
}

JavaScript

$(document).ready(function() {
  $('#jstree_demo_div').jstree({
    'core': {
      'data': {
        "url": "//www.jstree.com/fiddle/?lazy",
        "data": function(node) {
          return {
            "id": node.id
          };
        }
      }
    }
  });

  $('#jstree_demo_div2').jstree({
    'core': {
      'check_callback': true,
      'data': {
        "url": "//www.jstree.com/fiddle/?lazy",
        "data": function(node) {
          return {
            "id": node.id
          };
        }
      }
    }
  });
  $(".rename_node").click(function() {
    var tree = $(this).parent().find(".jstree");
    var node = tree.jstree('get_selected');
    tree.jstree(true).rename_node(node, "foo-bar");
  });
  $(".set_text").click(function() {
  console.log("hi!");
    var tree = $(this).parent().find(".jstree");
    var node = tree.jstree('get_selected');
    console.log(node);
    tree.jstree(true).set_text(node, "foo-bar");
  });
});