title: How to render React Component into itself, in a recursive way
body: <p>I have a component say, List Component. List component can render items 
  through component ListItem. Which can be easily achieved with something like below</p>
  
  <pre><code>import React from 'react';
  import ListItem from '../list-item/list-item';
  
  class List extends React.Component {
  
    renderListItems() {
      return this.props.items.map(item =&gt; &lt;ListItem item={item} /&gt;)
    }
  
    render(){
      return (
        &lt;div className="list"&gt;{this.renderListItems()}&lt;/div&gt;
      )
    }
  
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>import React from 'react';
  class ListItem extends React.Component {
  
    render(){
      return (
        &lt;div className="list-item"&gt;Name: {this.props.item.name}&lt;/div&gt;
      )
    }
  
  }
  </code></pre>
  
  <p>Now, in this scenario if list items can have parent children within them i.e. one list item can further render more list items how can I render ListItem component from within itself. Following is the rendering tree I am looking for and also the state of my data</p>
  
  <pre><code>List
   - ListItem
    - ListItem
    - ListItem
   - ListItem
   - ListItem
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>I think right structure will be something like this</p>
  
  <pre><code>List
   - ListItem
    - List
      - ListItem
      - ListItem
   - ListItem
   - ListItem
  </code></pre>
  
  <p>But it will ofcourse create a circular dependency between List and ListItem components, will that be a problem?</p>