JSFiddle - React, Tailwind, and code Playground

by Vahe Araqelyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/2.6.3/mobx.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/4.0.3/index.min.js"></script>
<script src="https://rawgit.com/mariocasciaro/object-path/master/index.js"></script>
<script src="https://rawgit.com/Metrime/randomID/master/randomID.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="app"></div>

CSS

.collapse{
  display:block;
}

Babel + JSX

const { observable, computed, action } = mobx;
const { observer } = mobxReact;

class Store {
    @observable treeData = [];

    add(name) {
        this.treeData.push({
            id: randomID(10, "a"),
            name: name,
            mode: "editable",
            disabled: false,
            indx: this.treeData.length,
            visible: true
        });
    }

    addSub(name, key, index, belongs) {
        this.treeData.push({
            id: randomID(10, "a"),
            name: name,
            disabled: false,
            belongs: do {
                if (belongs === undefined) {
                    `${key}.child`;
                } else {
                    `${belongs}.${key}.child`;
                }
            },
            indx: this.treeData.length,
            visible: true
        });
    }

    @computed
    get treeComputed() {
        var obj = {};
        this.treeData.map(function(value, index) {
            if (value.hasOwnProperty("belongs")) {
                var objWithPath = objectPath.get(obj, value.belongs.split("."));

                objWithPath[`text_${value.id}`] = {
                    text: value.name,
                    child: {},
                    belongs: value.belongs,
                    id: value.id,
                    disabled: false,
                    indx: value.indx,
                    visible: value.visible
                };
            } else {
                obj[`text_${value.id}`] = {
                    id: value.id,
                    text: value.name,
                    child: {},
                    mode: "editable",
                    indx: value.indx,
                    disabled: false,
                    visible: value.visible
                };
            }
        });
        console.log(obj);
        return obj;
    }
}

@observer
class App extends React.Component {
    constructor(props) {
        super(props);
        this.addSub = this.addSub.bind(this);
        this.showData =...