Recursive rendering of components at all levels

react component render itself
react nested dropdown menu
recursive component
how to render child component react
react nested list
react render nested json
json to react component
react cascading dropdown

I need help in to recursively render the components at all levels. There are Nodes at top level and then the same structure is followed till the end. If we get Privilege we render it differently however all Categories need to be displayed above.

Please find a fiddle here: https://jsfiddle.net/vedvrat13/dq0u2pm7/

Expected Output:

--Category 1
----SubCategory 1
------Privilege 11

--Category 2
----SubCategory 2
------Privilege 21
------Privilege 22

Please help me with the same. I tried multiple approaches however i am getting stuck as to how to render and call the function too.

This might help you to form the structure what you are expecting. You need to form tree structure to achieve it and find the working module here https://stackblitz.com/edit/react-65krxc?file=TreeComponent.js

renderRecursiveNodes(nodes){
    return nodes.map(node => {
            return (
            <div>
              <TreeComponent node={node} />
          </div>)
    });
};

  render() {
    return (
      <div>
          {this.renderRecursiveNodes(this.state.items)}      
      </div>      
    )
  }

Inside your TreeComponent

render() {
    let childNodes;

    if (this.props.node.nodes && this.props.node.nodes.length > 0) {
      console.log('test');
      childNodes = this.props.node.nodes.map(function(node, index) {
        return <li key={index}><TreeComponent node={node} /></li>
      });
    }

    return (
     <div>
        <h5>
          {this.props.node.label}
        </h5>
        <ul >
          {childNodes}
        </ul>
      </div>
    )
  }

Please let me know if you need more info. Thanks

Recursive rendering in React - Swati Sucharita, Here I am going to explain how we can render React components recursively. In this example we will… in /src/components. We have added all files but we need to render them too :) And I am adding a level for styling. Now if we look at our  This snippet follows the same pattern I use for all my Redux components, it’s the pattern used in the Redux Todo example, and I blindly copied/pasted it into the component that I wanted to use recursively. The example fails because mapStateToProps is invoked only for the top level component.

Fixed:

renderRecursive(level, nodes){
    return nodes.map(node => {
            return (
            <div>
              <div>{node.label}</div>
              {(node.type === 'CATEGORY' && node.nodes) && this.renderRecursive(level++, node.nodes)}
          </div>)
    });
};

Recursive rendering in React: Building a universal JSON renderer , The naive way would be to create a component for every hierarchy level, and after a few minutes of being in a mindset of "oh, not again", I had an  The component to render may even be from a completely different page of the application. Recursive rendering of components is not allowed. This technique allows the rendering of Tapestry pages to be highly dynamic. Returning a component instance does not short circuit method invocation (as described below), the way returning a boolean would. It

Okay this is a fun little one, but your issue is that you aren't actually looking at it the right way and as a result aren't building your markup structure correctly :P

By the looks of your Fiddle your end result actually want's to be this:

<div>
  <div>
    Category 1
    <div>
      Subcategory 1
      <div>
        Privilege 11
      </div>
    </div>
  </div>
  <div>
    Category 2
      <div>
      Subcategory 2
      <div>
        Privilege 21
      </div>
      <div>
        Privilege 22
      </div>
    </div>
  </div>
</div>

Boy that was annoying to type... Anyways, so once you look at this you can see:

  1. A parent div
  2. Every child is wrapped in a div, and has the label and (potentially) a child.

So now we build:

... or not because you answered it XD

Recursive React Components, In this article, I'll dive into how to build React components recursively, requires it, component trees can't be rendered in an iterative fashion, In a set of Russian nesting dolls, each doll is nested in another and they all look identical. and pass the entire subOption structure at this level up to the parent. Recursive components. Web frameworks such as React or Vue are powerful tools for building single page applications. Components built with these frameworks can handle displaying all sorts of datasets and enable users to interact with that data with far less code than in the past.

Building an Recursive Nested Dropdown Component in React, If any of the dropdown options has a nested submenu, it will contain its own options of nested options, I opted to use recursion to render the Nested Dropdown. Given that a nested dropdown of even three or four levels would result in quite  Ben Nadel revisits his exploration of recursive view rendering in Angular 6.1.10, this time using recursive Components (element directives) instead of Ng-Template directives. Components provide a more verbose but more straightforward way to reason about recursion, allowing for simple event and data propagation.

Recursive lightning component, It is considered done when all of its children are considered done. If it has <​aura:component> <aura:attribute name="level" type="Integer"  I wanted to recursively add a react component from within its own component. I saw this example of a tree component which was mapping through the child TreeNodes and adding child nodes in the same way. Unfortunately it doesn't work at all for me. The idea was to have a simple comment component, and the replies would reuse the same component.

Recursion for Nested, Tree-Structure Components in Vue, Recursion is something every developer must learn at one point or After implementing slots, the final level of recursion failed to render  Theoretically, this recursive function can be called an infinite number of times, although any real-world use case would likely be capped at a maximum of three or four levels. Rendering Only Active Menu Option and its Submenus

Comments
  • Instead of using JSFiddle, please consider creating a Code Snippet here
  • Thanks Abdul, this was exactly what i needed. This solved the tree structure and rendering as well using recursion.
  • Jesus I was so far into a comprehensive answer trying to explain why it wasn't working XD Nope here's the answer haha