JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<div id="tree">

</div>

<button onClick="change()">
test
</button>

JavaScript

data = [{
  "text": "Parent1",
  "selectable": "false",
  "nodeType": "main",
  "nodes": [{
    "text": "Child1",
    "typeId": "aa2d4ea9-bfad-4a5b-8794-994e7e482808",
    "nodeType": "sub"
  }, {
    "text": "Child2",
    "typeId": "e01bd0cb-c93b-40f9-be44-be67f20668aa",
    "nodeType": "sub"
  }]
}, {
  "text": "Parent2",
  "selectable": "false",
  "nodeType": "main",
  "nodes": [{
    "text": "Child1",
    "typeId": "a0256aa3-b2ef-53d7-1270-a5029e7138ce",
    "nodeType": "sub"
  }]
}]

$('#tree').treeview({
  data: data,
  onNodeSelected: function(event, data) {

    $m.nodeSelected(event, data);
  }
});

change = function(){
data = [{
  "text": "Parent1",
  "selectable": "false",
  "nodeType": "main",
  "nodes": [{
    "text": "Child1",
    "typeId": "aa2d4ea9-bfad-4a5b-8794-994e7e482808",
    "nodeType": "sub"
  }]
}, {
  "text": "Parent2",
  "selectable": "false",
  "nodeType": "main",
  "nodes": [{
    "text": "Child1",
    "typeId": "a0256aa3-b2ef-53d7-1270-a5029e7138ce",
    "nodeType": "sub"
  }]
}]

$('#tree').treeview({
  data: data,
  onNodeSelected: function(event, data) {

    $m.nodeSelected(event, data);
  }
});
};