Render recursively a nested data in React

You just have to recursively call Menu component for its children to display and pass as a data prop.

let data = [  {    title: "Top level 1",    slug: "top-level-1",    children: [      {        title: "Sub level 1",        slug: "sub-level-1",        children: [          {            title: "Sub Sub Level 1",            slug: "sub-sub-level-1",            children: [              {                title: "Sub Sub Level 2",                slug: "sub-sub-level-2"              }            ]          }        ]      },      {        title: "Sub level 2",        slug: "sub-level-2"      }    ]  },  {    title: "Top level 2",    slug: "top-level 2"  }];const Menu = ({data}) => {  return (    <ul>      {data.map(m => {        return (<li>          {m.title}          {m.children && <Menu data={m.children} />}        </li>);      })}    </ul>  );}const App = () => (  <div style={styles}>    <Hello name="CodeSandbox" />    <h2>Start editing to see some magic happen {'\u2728'}</h2>    <Menu data={data} />  </div>);

javascript wordpress reactjs

You could recursively Render the component for nested data which has variable depth.

Sample Snippet.

var data = [  {    title: "Top level 1",    slug: "top-level-1",    children: [      {        title: "Sub level 1",        slug: "sub-level-1",        children: [          {            title: "Sub Sub Level 1",            slug: "sub-sub-level-1"          }        ]      },      {        title: "Sub level 2",        slug: "sub-level-2"      }    ]  },  {    title: "Top level 2",    slug: "top-level 2"  }]const MyComponent  = (props) => {     if(Array.isArray(props.collection)) {         return <ul>               {props.collection.map((data)=> {                   return <li>                      <ul>                        <li>{data.title}</li>                        <li>{data.slug}</li>                        <li><MyComponent collection={data.children}/></li>                      </ul>                   </li>               })               }         </ul>     }     return null;}class App extends React.Component {    render() {        return (           <MyComponent collection={data}/>        )    }}ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>

Expand snippet