将JSX元素作为数组内另一个JSX元素的子元素推送（ReactJS）

Question

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:

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 <PrintNode treeData={obj} as a child of <PrintNode treeData={obj} hasChildNodes={true} /> in the treeToRender array?

App.js:

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 < nextData.length; i++) {
      let obj = nextData[i];
      if (!obj.nodes) {
        this.treeToRender.push(<PrintNode treeData={obj} />)
        key++;
      }
      else {
        this.treeToRender.push(<PrintNode treeData={obj} hasChildNodes={true} />)
        key++;
        this.getNextNode(obj.nodes);
      }
    }
    return this.treeToRender;
  }

  render() {
    return (
      <div className="app-container">
        {this.getNextNode(this.data)}
      </div>
    );
  }
}

PrintNode.js

import React from 'react';

export default class PrintNode extends React.Component {
    render() {
        let nodeToRender = '';
        if (this.props.hasChildNodes) {
            nodeToRender = <div className="has-child">{this.props.treeData.text}</div>
        }
        else {
            nodeToRender = <div>{this.props.treeData.text}</div>
        }
        return (
            <div>
                <div>{this.props.treeData.text}</div>
            </div>
        );
    }
}

Please note that each JSX element is an object, not a string which can be easily manipulated.

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?

Here is the fiddle .

Answer 1

Here is an updated solution for. I hope this helps you understand how to recursively build JSX objects.

I've provided a Codepen as well for you to look at so that you can see the working code.

function createTree(data) {
    return (
        <ul>
            {
                data.map((node) => {
                    return createNode(node);
                })
            }
        </ul>
    );
}

function createNode(data) {
    if (data.nodes) {
        return (
      <li>
        <PrintNode text={ data.text }>{createTree(data.nodes)}</PrintNode>
      </li>
    );
    } else {
        return <PrintNode text={ data.text } />
    }
}

const PrintNode = (props) => {
    return <li>{ props.text }{ props.children }</li>
};

const App = (props) => {
    return createTree(props.data);
}

ReactDOM.render(<App data={ data } />, document.getElementById("app"));

const data = [
    {
        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'
    }
];