material-ui dynamic nestedItems in List from JSON data

Question

I'm building a node tree in React.js using { List, ListItem, MakeSelectable} from 'material-ui/List'. I will eventually wire up JSON data coming from an internal web service call. I have no problem declaratively creating a nested list:

<List>
...
<ListItem
    ...
    nestedItems={[
      <ListItem
        ...

What I want to do is programmatically create this nested structure from the JSON data. It's easy enough to instantiate individual <ListItem> components and .push them into an array to render, but I'm having trouble getting the nested items into the node structure on the fly.

The best I've been able to do so far is to work from the bottom up, finding a bottom level of JSON nodes, pushing them into an array, creating the parent component, assigning my previously-created array as children of the parent, etc. e.g.

var Children = [
   <ListItem key={1} primaryText='Child 1' />
   <ListItem key={2} primaryText='Child 2' />
]

then...

var Parents = [
   <ListItem key={0} primaryText='Parent 1' nestedItems={Children} />
]

This is a bit cumbersome; is there a more graceful way to map up parents with nested children into a material-ui <List>?

Answer 1

Imagine that we have an object similar to the following...

RootObject = {
  children: [
    {
      children: [
        {
          children: [ {...props}, {...props}]
        },
        ...props,
      ]
    },
    {
      children: [...],
    },
    ...
    {
      children: [],
    },
  ],
  ...props,
}

Now we need to create a tree node that will call itself recursively:

const mapStructure = (nodes) => {
  if (nodes) {
    return nodes.map(node => (
      <ListItem
        key={node.id}
        primaryText={node.primaryText}
        initiallyOpen //optional
        nestedItems={mapStructure(node.children)}
      />
    ));
  }
};

And finally:

const DynamicNestedItems = ({ RootObject }) => {
  return (
    <List>
      {mapStructure(RootObject)}
    </List>
  );
};

export default DynamicNestedItems;