RyanEwen
commented
7 years ago The problem is that the order that you add items to the array matters not only within each level of the tree, but as a whole.
Children must be listed after their parent and before any other parent, otherwise they'll show up under the wrong parent.
This doesn't seem to be mentioned anywhere as a requirement and I'm not sure if it's a bug or a design decision. Either way, building your tree data in a nested fashion will save you a world of pain: https://github.com/fiffty/react-treeview-mui/issues/3
New items are always revealed at the bottom. Depth, children and parentIndex are correctly set.
The listItems array is given below: [ { "title": "Root", "depth": 0, "children": [ 1, 2 ], "_styles": { "root": { "paddingLeft": -16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": false, "_primaryText": "Root" }, { "title": "Designer Tshirts", "depth": 1, "children": [ 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ], "parentIndex": 0, "_styles": { "root": { "paddingLeft": 0, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": true, "_primaryText": "Designer Tshirts" }, { "title": "Men's Fashion", "depth": 1, "children": [ 13, 14, 15 ], "parentIndex": 0, "_styles": { "root": { "paddingLeft": 0, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": true, "_primaryText": "Men's Fashion" }, { "title": "Culture & Lifestyle", "depth": 2, "parentIndex": 1, "_styles": { "root": { "paddingLeft": 16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": true, "_primaryText": "Culture & Lifestyle" }, { "title": "Fitness & Sports", "depth": 2, "parentIndex": 1, "_styles": { "root": { "paddingLeft": 16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": true, "_primaryText": "Fitness & Sports" }, { "title": "Funny", "depth": 2, "parentIndex": 1, "_styles": { "root": { "paddingLeft": 16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": true, "_primaryText": "Funny" }, { "title": "Clothing", "depth": 2, "children": [ 16, 17 ], "parentIndex": 2, "_styles": { "root": { "paddingLeft": 16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": false, "_primaryText": "Clothing" }, { "title": "Shoes", "depth": 2, "parentIndex": 2, "_styles": { "root": { "paddingLeft": 16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": false, "_primaryText": "Shoes" }, { "title": "Accessories", "depth": 2, "parentIndex": 2, "_styles": { "root": { "paddingLeft": 16, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": false, "_primaryText": "Accessories" }, { "title": "Jeans", "depth": 3, "parentIndex": 13, "_styles": { "root": { "paddingLeft": 32, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": false, "_primaryText": "Jeans" }, { "title": "Shirts", "depth": 3, "parentIndex": 13, "_styles": { "root": { "paddingLeft": 32, "backgroundColor": null, "height": "48px", "cursor": "pointer", "color": "rgba(0,0,0,0.87)", "overflow": "hidden", "transform": "translateZ(0)" } }, "_shouldRender": false, "_primaryText": "Shirts" } ]