How to make a Muiv5 TreeView with Checkbox for an array of objects?

I am using muiv5 treeview component to build a treeview dropdown. The component doesn't have checkbox support for selection/deselection but after bit of searching I was able to find a kind of similar solution but the data that needs to be passed to tree view is an object and it has a parent node. I don't need a parent node. Basically my structure is an array of objects and not an object. Here is a link to codesandbox project Click here

The rich object is

const data: RenderTree = { id: 'root', name: 'Parent', children: [ { id: '1', name: 'Child - 1', }, { id: '3', name: 'Child - 3', children: [ { id: '4', name: 'Child - 4', }, ], }, ], };

but my data is

const data = [ { id: '1', name: 'Child - 1', }, { id: '3', name: 'Child - 3', children: [ { id: '4', name: 'Child - 4', }, ], }, ],

I don't want a root parent node to display

1 Answer

I was looking for same solution but didn't find it, so I created one.

Please note that for the de-selecting you should add the parent node.

Please look on my working example: Working example using MUI library