Render Recursively A Nested Data In React

How would i go about rendering a menu with nested

items with an an unknown amount of children in react from an object like in the following example? [ { title: 'To

Solution 1:

Codesandbox example

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"
  }
];

constMenu = ({data}) => {
  return (
    <ul>
      {data.map(m => {
        return (<li>
          {m.title}
          {m.children && <Menudata={m.children} />}
        </li>);
      })}
    </ul>
  );
}

constApp = () => (
  <divstyle={styles}><Helloname="CodeSandbox" /><h2>Start editing to see some magic happen {'\u2728'}</h2><Menudata={data} /></div>
);

Solution 2:

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"
  }
]

constMyComponent  = (props) => {
     if(Array.isArray(props.collection)) {
         return<ul>
               {props.collection.map((data)=> {
                   return <li><ul><li>{data.title}</li><li>{data.slug}</li><li><MyComponentcollection={data.children}/></li></ul></li>
               })
               }
         </ul>
     }
     returnnull;
}

classAppextendsReact.Component {
    render() {
        return (
           <MyComponentcollection={data}/>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

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

P.S. The snippet contains formatting errors, but I am sure you will be able to rectify that. Snippet was to give an idea of the approach