From 3ea6e5487cbc51b89513b16c0525b0941b645fb7 Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Sun, 9 Feb 2020 20:08:01 +0100
Subject: [PATCH 1/7] Init

---
 .../components/tree-view/RecursiveTreeView.js | 74 +++++++++++++++++
 .../tree-view/RecursiveTreeView.tsx           | 80 +++++++++++++++++++
 .../pages/components/tree-view/tree-view.md   |  6 ++
 3 files changed, 160 insertions(+)
 create mode 100644 docs/src/pages/components/tree-view/RecursiveTreeView.js
 create mode 100644 docs/src/pages/components/tree-view/RecursiveTreeView.tsx

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
new file mode 100644
index 00000000000000..de0fd5e4886918
--- /dev/null
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+export default function FileSystemNavigator() {
+  const classes = useStyles();
+
+  const TreeRender = data => {
+    if (Array.isArray(data.children)) {
+      return (
+        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
+          {data.children.map((node, idx) => TreeRender(node))}
+        </TreeItem>
+      );
+    }
+    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
+  };
+
+  return (
+    <TreeView
+      className={classes.root}
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+    >
+      {TreeRender(data)}
+    </TreeView>
+  );
+}
+
+const useStyles = makeStyles({
+  root: {
+    height: 216,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+});
+
+const data = {
+  id: 'root',
+  name: 'Parent',
+  children: [
+    {
+      id: '1',
+      name: 'Child - 1',
+      children: [
+        {
+          id: '2',
+          name: 'Child - 2',
+          children: [
+            {
+              id: '3',
+              name: 'Child - 3',
+              children: null,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: '4',
+      name: 'Child - 4',
+      children: [
+        {
+          id: '5',
+          name: 'Child - 5',
+          children: null,
+        },
+      ],
+    },
+  ],
+};
diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
new file mode 100644
index 00000000000000..6f792bdbec535f
--- /dev/null
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+interface TreeRenderProps {
+  id: string;
+  name: string;
+  children: TreeRenderProps[] | null;
+}
+
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const TreeRender = (data: TreeRenderProps) => {
+    if (Array.isArray(data.children)) {
+      return (
+        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
+          {data.children.map((node, idx) => TreeRender(node))}
+        </TreeItem>
+      );
+    }
+    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
+  };
+
+  return (
+    <TreeView
+      className={classes.root}
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+    >
+      {TreeRender(data)}
+    </TreeView>
+  );
+}
+
+const useStyles = makeStyles({
+  root: {
+    height: 216,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+});
+
+const data: TreeRenderProps = {
+  id: 'root',
+  name: 'Parent',
+  children: [
+    {
+      id: '1',
+      name: 'Child - 1',
+      children: [
+        {
+          id: '2',
+          name: 'Child - 2',
+          children: [
+            {
+              id: '3',
+              name: 'Child - 3',
+              children: null,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: '4',
+      name: 'Child - 4',
+      children: [
+        {
+          id: '5',
+          name: 'Child - 5',
+          children: null,
+        },
+      ],
+    },
+  ],
+};
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index ff8a3bb367fddc..1f0d4fe8be02ff 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -17,6 +17,12 @@ The tree view also offers a controlled API.
 
 {{"demo": "pages/components/tree-view/ControlledTreeView.js"}}
 
+## Recursive
+
+render tree view with recursion approach
+
+{{"demo": "pages/components/tree-view/RecursiveTreeView.js"}}
+
 ## Customized tree view
 
 ### Custom icons, border and animation

From c69f6a729e58514bbee6f9c7b6dc56f5c5cf11ca Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Sun, 9 Feb 2020 20:10:35 +0100
Subject: [PATCH 2/7] Update docs

---
 docs/src/pages/components/tree-view/tree-view.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index 1f0d4fe8be02ff..170a29f9cb40c5 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -19,7 +19,7 @@ The tree view also offers a controlled API.
 
 ## Recursive
 
-render tree view with recursion approach
+Render tree view with recursion approach.
 
 {{"demo": "pages/components/tree-view/RecursiveTreeView.js"}}
 

From 88c0f470519535da79d876000d0b503d412916c0 Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Sun, 9 Feb 2020 20:15:27 +0100
Subject: [PATCH 3/7] update name

---
 docs/src/pages/components/tree-view/RecursiveTreeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
index de0fd5e4886918..f5c300be587da8 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.js
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -5,7 +5,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-export default function FileSystemNavigator() {
+export default function RecursiveTreeView() {
   const classes = useStyles();
 
   const TreeRender = data => {

From cbb2b504bd4b92ff2e47cf80e80d5b3f899d4965 Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Sun, 9 Feb 2020 20:27:31 +0100
Subject: [PATCH 4/7] Prettier fix

---
 .../components/tree-view/RecursiveTreeView.js | 66 +++++++++----------
 .../tree-view/RecursiveTreeView.tsx           | 66 +++++++++----------
 2 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
index f5c300be587da8..957bfae49fc7c1 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.js
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -5,39 +5,6 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-export default function RecursiveTreeView() {
-  const classes = useStyles();
-
-  const TreeRender = data => {
-    if (Array.isArray(data.children)) {
-      return (
-        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
-          {data.children.map((node, idx) => TreeRender(node))}
-        </TreeItem>
-      );
-    }
-    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
-  };
-
-  return (
-    <TreeView
-      className={classes.root}
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
-    >
-      {TreeRender(data)}
-    </TreeView>
-  );
-}
-
-const useStyles = makeStyles({
-  root: {
-    height: 216,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 const data = {
   id: 'root',
   name: 'Parent',
@@ -72,3 +39,36 @@ const data = {
     },
   ],
 };
+
+const useStyles = makeStyles({
+  root: {
+    height: 216,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+});
+
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const TreeRender = data => {
+    if (Array.isArray(data.children)) {
+      return (
+        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
+          {data.children.map(node => TreeRender(node))}
+        </TreeItem>
+      );
+    }
+    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
+  };
+
+  return (
+    <TreeView
+      className={classes.root}
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+    >
+      {TreeRender(data)}
+    </TreeView>
+  );
+}
diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
index 6f792bdbec535f..d822df5f80bbe3 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -11,39 +11,6 @@ interface TreeRenderProps {
   children: TreeRenderProps[] | null;
 }
 
-export default function RecursiveTreeView() {
-  const classes = useStyles();
-
-  const TreeRender = (data: TreeRenderProps) => {
-    if (Array.isArray(data.children)) {
-      return (
-        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
-          {data.children.map((node, idx) => TreeRender(node))}
-        </TreeItem>
-      );
-    }
-    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
-  };
-
-  return (
-    <TreeView
-      className={classes.root}
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
-    >
-      {TreeRender(data)}
-    </TreeView>
-  );
-}
-
-const useStyles = makeStyles({
-  root: {
-    height: 216,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 const data: TreeRenderProps = {
   id: 'root',
   name: 'Parent',
@@ -78,3 +45,36 @@ const data: TreeRenderProps = {
     },
   ],
 };
+
+const useStyles = makeStyles({
+  root: {
+    height: 216,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+});
+
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const TreeRender = (data: TreeRenderProps) => {
+    if (Array.isArray(data.children)) {
+      return (
+        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
+          {data.children.map(node => TreeRender(node))}
+        </TreeItem>
+      );
+    }
+    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
+  };
+
+  return (
+    <TreeView
+      className={classes.root}
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+    >
+      {TreeRender(data)}
+    </TreeView>
+  );
+}

From 63f93374a7089e4e3226f551693e0b832ba19021 Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Sun, 9 Feb 2020 20:34:54 +0100
Subject: [PATCH 5/7] Fix variable shadowing

---
 .../pages/components/tree-view/RecursiveTreeView.js   | 11 ++++++-----
 .../pages/components/tree-view/RecursiveTreeView.tsx  | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
index 957bfae49fc7c1..bb939db7b94eae 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.js
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -51,15 +51,16 @@ const useStyles = makeStyles({
 export default function RecursiveTreeView() {
   const classes = useStyles();
 
-  const TreeRender = data => {
-    if (Array.isArray(data.children)) {
+  const TreeRender = nodes => {
+    const { children, name } = nodes;
+    if (Array.isArray(children)) {
       return (
-        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
-          {data.children.map(node => TreeRender(node))}
+        <TreeItem key={name} nodeId={name} label={name}>
+          {children.map(node => TreeRender(node))}
         </TreeItem>
       );
     }
-    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
+    return <TreeItem key={name} nodeId={name} label={name} />;
   };
 
   return (
diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
index d822df5f80bbe3..c86f694f197b8b 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -57,15 +57,16 @@ const useStyles = makeStyles({
 export default function RecursiveTreeView() {
   const classes = useStyles();
 
-  const TreeRender = (data: TreeRenderProps) => {
-    if (Array.isArray(data.children)) {
+  const TreeRender = (nodes: TreeRenderProps) => {
+    const { children, name } = nodes;
+    if (Array.isArray(children)) {
       return (
-        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
-          {data.children.map(node => TreeRender(node))}
+        <TreeItem key={name} nodeId={name} label={name}>
+          {children.map(node => TreeRender(node))}
         </TreeItem>
       );
     }
-    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
+    return <TreeItem key={name} nodeId={name} label={name} />;
   };
 
   return (

From b0b0c1644c753320a34f43ba4a59147c16cd5d25 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 10 Feb 2020 00:55:58 +0100
Subject: [PATCH 6/7] improve demo :)

---
 .../components/tree-view/RecursiveTreeView.js | 54 ++++++++-----------
 .../tree-view/RecursiveTreeView.tsx           | 46 ++++++----------
 .../pages/components/tree-view/tree-view.md   | 26 +++++++--
 3 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
index bb939db7b94eae..92a21c2952869c 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.js
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -12,27 +13,14 @@ const data = {
     {
       id: '1',
       name: 'Child - 1',
-      children: [
-        {
-          id: '2',
-          name: 'Child - 2',
-          children: [
-            {
-              id: '3',
-              name: 'Child - 3',
-              children: null,
-            },
-          ],
-        },
-      ],
     },
     {
-      id: '4',
-      name: 'Child - 4',
+      id: '3',
+      name: 'Child - 3',
       children: [
         {
-          id: '5',
-          name: 'Child - 5',
+          id: '4',
+          name: 'Child - 4',
           children: null,
         },
       ],
@@ -42,34 +30,38 @@ const data = {
 
 const useStyles = makeStyles({
   root: {
-    height: 216,
+    height: 110,
     flexGrow: 1,
     maxWidth: 400,
   },
 });
 
+function renderTree(nodes) {
+  return (
+    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+      {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
+    </TreeItem>
+  );
+}
+
+renderTree.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.arrayOf(PropTypes.object)])
+    .isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
 export default function RecursiveTreeView() {
   const classes = useStyles();
 
-  const TreeRender = nodes => {
-    const { children, name } = nodes;
-    if (Array.isArray(children)) {
-      return (
-        <TreeItem key={name} nodeId={name} label={name}>
-          {children.map(node => TreeRender(node))}
-        </TreeItem>
-      );
-    }
-    return <TreeItem key={name} nodeId={name} label={name} />;
-  };
-
   return (
     <TreeView
       className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpanded={['root']}
       defaultExpandIcon={<ChevronRightIcon />}
     >
-      {TreeRender(data)}
+      {renderTree(data)}
     </TreeView>
   );
 }
diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
index c86f694f197b8b..be1e533717ac4f 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -18,27 +18,14 @@ const data: TreeRenderProps = {
     {
       id: '1',
       name: 'Child - 1',
-      children: [
-        {
-          id: '2',
-          name: 'Child - 2',
-          children: [
-            {
-              id: '3',
-              name: 'Child - 3',
-              children: null,
-            },
-          ],
-        },
-      ],
     },
     {
-      id: '4',
-      name: 'Child - 4',
+      id: '3',
+      name: 'Child - 3',
       children: [
         {
-          id: '5',
-          name: 'Child - 5',
+          id: '4',
+          name: 'Child - 4',
           children: null,
         },
       ],
@@ -48,34 +35,31 @@ const data: TreeRenderProps = {
 
 const useStyles = makeStyles({
   root: {
-    height: 216,
+    height: 110,
     flexGrow: 1,
     maxWidth: 400,
   },
 });
 
+function renderTree(nodes: TreeRenderProps) {
+  return (
+    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+      {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
+    </TreeItem>
+  );
+}
+
 export default function RecursiveTreeView() {
   const classes = useStyles();
 
-  const TreeRender = (nodes: TreeRenderProps) => {
-    const { children, name } = nodes;
-    if (Array.isArray(children)) {
-      return (
-        <TreeItem key={name} nodeId={name} label={name}>
-          {children.map(node => TreeRender(node))}
-        </TreeItem>
-      );
-    }
-    return <TreeItem key={name} nodeId={name} label={name} />;
-  };
-
   return (
     <TreeView
       className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpanded={['root']}
       defaultExpandIcon={<ChevronRightIcon />}
     >
-      {TreeRender(data)}
+      {renderTree(data)}
     </TreeView>
   );
 }
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index 170a29f9cb40c5..527ec8f001210c 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -17,11 +17,27 @@ The tree view also offers a controlled API.
 
 {{"demo": "pages/components/tree-view/ControlledTreeView.js"}}
 
-## Recursive
-
-Render tree view with recursion approach.
-
-{{"demo": "pages/components/tree-view/RecursiveTreeView.js"}}
+## Rich object
+
+While the `TreeView`/`TreeItem` component API is great to maximize flexibility, an extra step is needed to handle a rich object.
+
+Let's consider a data variable with the following shape, a recursion can be used to handle it.
+
+```js
+const data = {
+  id: 'root',
+  name: 'Parent',
+  children: [
+    {
+      id: '1',
+      name: 'Child - 1',
+    },
+    // …
+  ],
+};
+```
+
+{{"demo": "pages/components/tree-view/RecursiveTreeView.js", "defaultCodeOpen": false}}
 
 ## Customized tree view
 

From 38fbdec6b9fd24306fee7263968ffbb64c1167db Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 10 Feb 2020 10:58:34 +0100
Subject: [PATCH 7/7] review

---
 .../components/tree-view/RecursiveTreeView.js | 19 ++++---------------
 .../tree-view/RecursiveTreeView.tsx           | 17 +++++++----------
 .../pages/components/tree-view/tree-view.md   |  4 ++--
 3 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js
index 92a21c2952869c..537e43a47cbe56 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.js
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -21,7 +20,6 @@ const data = {
         {
           id: '4',
           name: 'Child - 4',
-          children: null,
         },
       ],
     },
@@ -36,23 +34,14 @@ const useStyles = makeStyles({
   },
 });
 
-function renderTree(nodes) {
-  return (
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const renderTree = nodes => (
     <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
       {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
     </TreeItem>
   );
-}
-
-renderTree.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.arrayOf(PropTypes.object)])
-    .isRequired,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-};
-
-export default function RecursiveTreeView() {
-  const classes = useStyles();
 
   return (
     <TreeView
diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
index be1e533717ac4f..afcb4c6b291667 100644
--- a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
+++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -5,13 +5,13 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-interface TreeRenderProps {
+interface RenderTree {
   id: string;
   name: string;
-  children: TreeRenderProps[] | null;
+  children?: RenderTree[];
 }
 
-const data: TreeRenderProps = {
+const data: RenderTree = {
   id: 'root',
   name: 'Parent',
   children: [
@@ -26,7 +26,6 @@ const data: TreeRenderProps = {
         {
           id: '4',
           name: 'Child - 4',
-          children: null,
         },
       ],
     },
@@ -41,16 +40,14 @@ const useStyles = makeStyles({
   },
 });
 
-function renderTree(nodes: TreeRenderProps) {
-  return (
+export default function RecursiveTreeView() {
+  const classes = useStyles();
+
+  const renderTree = (nodes: RenderTree) => (
     <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
       {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null}
     </TreeItem>
   );
-}
-
-export default function RecursiveTreeView() {
-  const classes = useStyles();
 
   return (
     <TreeView
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index 527ec8f001210c..80f2c5113bb499 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -19,9 +19,9 @@ The tree view also offers a controlled API.
 
 ## Rich object
 
-While the `TreeView`/`TreeItem` component API is great to maximize flexibility, an extra step is needed to handle a rich object.
+While the `TreeView`/`TreeItem` component API maximizes flexibility, an extra step is needed to handle a rich object.
 
-Let's consider a data variable with the following shape, a recursion can be used to handle it.
+Let's consider a data variable with the following shape, recursion can be used to handle it.
 
 ```js
 const data = {