HELP wanted on rendering children nodes and its children.

Hello!

I'm quite new to React so please consider this.. :)

I trying to use the dynamic rendering part of this amazing tree component! :)
But cant get it to work properly...

My github repo is here

I getting the tree data from my local api, calling it with help of axios.

First issue:
I can generate the first of the tree and when I click on the + next to a node, ex 13010000 I can generate the children nodes to its parent node and console log them, but the tree does not update with its children.

When I comment out this line if (level < 1 || curKey.length - 3 > level * 2) return; I can display the children by only follow this steps.. and not direct by only clicking the + sign...

1. clicking the plus sign on the node
2. clicking the minus sign on the same node
3. clicking on the plus sign again on the same node.

Second issue
I can also only drill down one level more, after that it stops working.

For example 13000000 -> children (13010000,13020000,13030000,13040000,13050000) ->
but cant get 13010100,13010200 and its children (ex 13010101,13010102)

Any idea of on how I can fix this?

Here is my code:

import React, { Component } from "react";
import Tree, { TreeNode } from "rc-tree";
import axios from "axios";
import "rc-tree/assets/index.css";

function generateTreeNodes(treeNode) {
  const arr = [];
  const key = treeNode.props.eventKey;
  // console.log("key", key);
  axios
    .get(`/api/eclass/${key}`)
    .then(response => {
      response.data.nodes.map((node, i) => {
        return arr.push({ name: node.codedName, key: node.codedName });
      });
      console.log("child array", arr);
    })
    .catch(error => console.log(error));

  /*   for (let i = 0; i < 3; i++) {
    arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
  } */
  return arr;
}

function getNewTreeData(treeData, curKey, child, level) {
  const loop = data => {
    if (level < 1 || curKey.length - 3 > level * 2) return;
    data.forEach(item => {
      if (curKey.indexOf(item.key) === 0) {
        if (item.children) {
          loop(item.children);
        } else {
          item.children = child;
        }
      }
    });
  };
  loop(treeData);
  setLeaf(treeData, curKey, level);
}

function setLeaf(treeData, curKey, level) {
  const loopLeaf = (data, lev) => {
    const l = lev - 1;
    data.forEach(item => {
      if (
        item.key.length > curKey.length
          ? item.key.indexOf(curKey) !== 0
          : curKey.indexOf(item.key) !== 0
      ) {
        return;
      }
      if (item.children) {
        loopLeaf(item.children, l);
      } else if (l < 1) {
        item.isLeaf = true;
      }
    });
  };
  loopLeaf(treeData, level + 1);
}

class RCtree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      checkedKeys: []
    };
    this.onSelect = this.onSelect.bind(this);
    this.onCheck = this.onCheck.bind(this);
    this.onLoadData = this.onLoadData.bind(this);
  }

  componentDidMount() {
    axios
      .get("/api/eclass/13000000")
      .then(response => {
        let treeData = [];
        response.data.nodes.map((node, i) => {
          return treeData.push({ name: node.codedName, key: node.codedName });
        });
        // console.log("treeData: " + JSON.stringify(treeData, null, 2));
        this.setState({ treeData: treeData });
        // console.log("state.nodes", JSON.stringify(this.state, null, 2));
      })
      .catch(error => console.log(error));
  }

  /*   componentDidMount() {
    setTimeout(() => {
      this.setState({
        treeData: [
          { name: "pNode 01", key: "0-0" },
          { name: "pNode 02", key: "0-1" },
          { name: "pNode 03", key: "0-2", isLeaf: true }
        ],
        checkedKeys: ["0-0"]
      });
    }, 100);
  } */
  onSelect(info) {
    console.log("selected", info);
  }

  onCheck(checkedKeys) {
    console.log("checkedKeys", checkedKeys);
    this.setState({ checkedKeys });
  }
  onLoadData(treeNode) {
    console.log("treeNode", treeNode);
    return new Promise(resolve => {
      setTimeout(() => {
        const treeData = [...this.state.treeData];
        console.log("treeNode.props.eventKey,", treeNode.props.eventKey);
        getNewTreeData(
          treeData,
          treeNode.props.eventKey,
          generateTreeNodes(treeNode),
          2
        );
        this.setState({ treeData });
        resolve();
      }, 500);
    });
  }

  render() {
    const loop = data => {
      return data.map(item => {
        if (item.children) {
          return (
            <TreeNode title={item.name} key={item.key}>
              {loop(item.children)}
            </TreeNode>
          );
        }
        return (
          <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} />
        );
      });
    };
    const treeNodes = loop(this.state.treeData);
    return (
      <div>
        <h2>dynamic render</h2>
        <Tree
          onSelect={this.onSelect}
          checkable
          onCheck={this.onCheck}
          checkedKeys={this.state.checkedKeys}
          loadData={this.onLoadData}
        >
          {treeNodes}
        </Tree>
      </div>
    );
  }
}

export default RCtree;

Start by tracing the Tree component's loadData entry point through onLoadData, generateTreeNodes, and getNewTreeData, using the included example component and API response shape. Verify that expanding a node updates the nested TreeNode hierarchy for multiple levels and that the rendered tree reflects the loaded children.