title: Push JSX element as a child of another JSX element inside an Array (ReactJS)
body: <p>I am writing a react app to print a tree-view from an array of nested objects. Each node should be collapsible (open by default). A node may have any number of child nodes. Here is a sample of what I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/NPdtM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NPdtM.jpg" alt="Tree View"></a></p>
  
  <p>I am collecting all node components inside an array and then accessing that collection in render method. Right now all node components are printed at same heirarchy as they are not nested in each other. In the code below, how can I add <code>&lt;PrintNode treeData={obj}</code> as a child of <code>&lt;PrintNode treeData={obj} hasChildNodes={true} /&gt;</code> in the <code>treeToRender</code> array?</p>
  
  <p>App.js:</p>
  
  <pre><code>import React from 'react';
  import PrintNode from './components/PrintNode';
  
  export default class App extends React.Component {
    data = [ // this data will come from another file in real app
      {
        text: 'Parent 1',
        nodes: [
          {
            text: 'Child 1',
            nodes: [
              {
                text: 'Grandchild 1'
              },
              {
                text: 'Grandchild 2'
              }
            ]
          },
          {
            text: 'Child 2'
          }
        ]
      },
      {
        text: 'Parent 2'
      },
      {
        text: 'Parent 3'
      },
      {
        text: 'Parent 4'
      },
      {
        text: 'Parent 5'
      }
    ];
  
    treeToRender = [];
  
    getNextNode(nextData) {
      let key = 0;
      for (let i = 0; i &lt; nextData.length; i++) {
        let obj = nextData[i];
        if (!obj.nodes) {
          this.treeToRender.push(&lt;PrintNode treeData={obj} /&gt;)
          key++;
        }
        else {
          this.treeToRender.push(&lt;PrintNode treeData={obj} hasChildNodes={true} /&gt;)
          key++;
          this.getNextNode(obj.nodes);
        }
      }
      return this.treeToRender;
    }
  
    render() {
      return (
        &lt;div className="app-container"&gt;
          {this.getNextNode(this.data)}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>PrintNode.js</p>
  
  <pre><code>import React from 'react';
  
  export default class PrintNode extends React.Component {
      render() {
          let nodeToRender = '';
          if (this.props.hasChildNodes) {
              nodeToRender = &lt;div className="has-child"&gt;{this.props.treeData.text}&lt;/div&gt;
          }
          else {
              nodeToRender = &lt;div&gt;{this.props.treeData.text}&lt;/div&gt;
          }
          return (
              &lt;div&gt;
                  &lt;div&gt;{this.props.treeData.text}&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Please note that each JSX element is an object, not a string which can be easily manipulated. </p>
  
  <p>Also I am getting error "Each child in an array or iterator should have a unique "key" prop. Check the render method of App." even though I have added key to PrintNode. Why is this happening?</p>
  
  <p>Here is the <a href="https://jsfiddle.net/9rpLw0y6/1/" rel="nofollow noreferrer">fiddle</a>.</p>