multilevel nested list in material-ui next

Question

I'd like to create multilevel nested list to display the menu on the left side - - very similar as on oficial site: https://material-ui-next.com/. data source is in JSON where for each item there's also information about parent item and some other data - - this is the example:

{
    "task_number": 1201092,
    "task": "Monthly Cash Flow from Deliveries",
    "task_parent_number": 1201090,
    "task_parent": "Wholesale Cash Flow"
},
{
    "task_number": 1201095,
    "task": "Monthly Cash Flow from Fix Amounts",
    "task_parent_number": 1201090,
    "task_parent": "Wholesale Cash Flow"
},
{
    "task_number": 1201100,
    "task": "Wholesale Positions",
    "task_parent_number": 1200007,
    "task_parent": "Wholesale Contract Portfolio"
},
{
    "task_number": 1201200,
    "task": "All Wholesale Positions",
    "task_parent_number": 1201100,
    "task_parent": "Wholesale Positions"
}

I'am able to create an object with various nested elements - children - if they exist with followin function:

function getNestedChildren(arr, parent) {
  var out = [];
  for (var i in arr) {
    if (arr[i].task_parent_number == parent) {
      //console.log(i, arr[i].task_parent_number, arr[i].task_number);
      var children = getNestedChildren(arr, arr[i].task_number);
      if (children.length) {
        arr[i].children = children;
      }
      out.push(arr[i]);
    }
  }

  return out;
}

I've been following instructions for creating a nested list and importing it here: https://material-ui-next.com/demos/lists/#nested-list

..but I am not able to create a menu with nested elements as desired . . if someone can point me in the right direction would be great..

Answer 1

OK, i got this to work combining these 2 parts:

1. React example recursive render: https://gist.github.com/nkvenom/bf7b1adfe982cb47dee3
2. Material List guide here - https://medium.com/@ali.atwa/getting-started-with-material-ui-for-react-59c82d9ffd93