javascript - How to create nested child components dynamically in react?

Question

I know how to dynamically render components based on state and conditional rendering, yet what I'm trying to do is rendering an unclear number of components, inside each other, dynamically.

I have a tree component that maps through an array for the first level of data, yet nested levels are lazy-loaded (by clicking on them, there is a request to the server to fetch the children of that node). I can hard code some more tree components nested for the next few levels of nesting, But what if there was an infinite number of children nested in children. I want them to be dynamically created (something like js appendchild, by clicking on that node), yet in the standard react way.

<Tree>
    <TreeItem>             //first level
         <TreeItem>        // second level
               ...        // infinit levels, each level generate by clicking on parent
         </TreeItem>
    </TreeItem>
</Tree>

question from:https://stackoverflow.com/questions/65949464/how-to-create-nested-child-components-dynamically-in-react

Answer 1

Waitting for answers