How to use react-sortable-tree - 10 common examples

createCodeForGenerateContent() {
    const getNodeKey = ({ treeIndex }) => treeIndex;
    const flatteningNestedArray = getFlatDataFromTree({treeData: this.state.treeData, getNodeKey});
    let flattenedVar = flatteningNestedArray;
    // console.log('theprops ' + this.props.flattenedArray)
    let version1 = [];
    let version2 = {};
    for(let i = 0; i

render() {
    console.log(this.state.parents)
    const getNodeKey = ({ treeIndex }) => treeIndex;
    const flatteningNestedArray = getFlatDataFromTree({treeData: this.state.treeData, getNodeKey});
    let flattenedVar = flatteningNestedArray;
    // console.log('theprops ' + this.props.flattenedArray)
    let version1 = [];
    let version2 = {};
    for(let i = 0; i

if(selected.children[0].subtitle === 'BottomTab') 
            return `${image}/Tab-Drawer/${selected.children.length}TabDrawer.png`;
            
          return populateImg(image, selected.children[0])
        }
      
      case 'Simple Screen':
      // if(selected.children && selected.children.length) 
        // return `${image}/Screen/${selected.children.length}screen.png`;
        //trying to get the parent so i can access the children.length on the tree
        //selected.path === [0, 1];
        
        console.log('case ss: path', 
        treeData, 
        selected,
        getNodeAtPath({
          treeData, 
          path: selected.path.slice(0, selected.path.length), 
          getNodeKey: selected.key,
          ignoreCollapsed
        })
        );
      case 'Stack':
        break;
      
      case 'Switch':
        return image += 'switch.png';
      
      default:
        return image += 'default.png'
    }

createCodeForGenerateContent() {
    const getNodeKey = ({ treeIndex }) => treeIndex;
    const flatteningNestedArray = getFlatDataFromTree({treeData: this.state.treeData, getNodeKey});
    let flattenedVar = flatteningNestedArray;
/*
  version1 is an array of sub-arrays. Within each array, the last element
  is the parent of all previous elements.
 */
    let version1 = [];
  /* For version2, the key is the parent. Value is all of the children
    stored as elements in an array.
  */
    let version2 = {};

    for(let i = 0; i

callback: (rowInfoIter) => {
						var isActive = (rowInfoIter.treeIndex == rowInfo.treeIndex);
						// If toggleMode just toggle to activate/inactivate selected node
						// If non toggle mode inactive all nodes but selected
						if (isActive && toggleMode) {
							rowInfoIter.node.active = !rowInfoIter.node.active;
							currentTreeData = changeNodeAtPath({ treeData: currentTreeData, path: rowInfoIter.path, newNode: rowInfoIter.node, getNodeKey: ({ treeIndex }) => treeIndex, ignoreCollapsed: false });
						}
						else if (isActive != rowInfoIter.node.active  && !toggleMode) {
							rowInfoIter.node.active = isActive;
							currentTreeData = changeNodeAtPath({ treeData: currentTreeData, path: rowInfoIter.path, newNode: rowInfoIter.node, getNodeKey: ({ treeIndex }) => treeIndex, ignoreCollapsed: false });
						}

					}
				});

handleClick(event, rowInfo) {
			var toggleMode = this.props.toggleMode;
			var currentTreeData = this.state.treeData;
			// If node has children, we expand/collapse the node
			if (rowInfo.node.children != undefined && rowInfo.node.children.length > 0) {
				rowInfo.node.expanded = !rowInfo.node.expanded;
				currentTreeData = changeNodeAtPath({ treeData: currentTreeData, path: rowInfo.path, newNode: rowInfo.node, getNodeKey: ({ treeIndex }) => treeIndex, ignoreCollapsed: false });
			}
			// If node has no children, we select the node
			else if (rowInfo.node.children == undefined) {
				walk({
					treeData: currentTreeData,
					getNodeKey: ({ treeIndex }) => treeIndex,
					ignoreCollapsed: false,
					callback: (rowInfoIter) => {
						var isActive = (rowInfoIter.treeIndex == rowInfo.treeIndex);
						// If toggleMode just toggle to activate/inactivate selected node
						// If non toggle mode inactive all nodes but selected
						if (isActive && toggleMode) {
							rowInfoIter.node.active = !rowInfoIter.node.active;
							currentTreeData = changeNodeAtPath({ treeData: currentTreeData, path: rowInfoIter.path, newNode: rowInfoIter.node, getNodeKey: ({ treeIndex }) => treeIndex, ignoreCollapsed: false });
						}
						else if (isActive != rowInfoIter.node.active  && !toggleMode) {

onClick={() =>
                          mutations.dataChange({
                            data: addNodeUnderParent({
                              treeData: state.data,
                              parentKey: path[path.length - 1],
                              expandParent: true,
                              getNodeKey,
                              newNode: {
                                title: '',
                              },
                              // addAsFirstChild: state.addAsFirstChild,
                            }).treeData,
                          })
                        }

expand(expanded) {
    this.setState({
      treeData: toggleExpandedForAll({
        treeData: this.state.treeData,
        expanded,
      }),
    });
  }

expand(expanded) {
    const newTreeData = toggleExpandedForAll({
      treeData: this.state.treeData,
      expanded,
    });
    if (this._editor) {
      this._editor.set(newTreeData);
      this.setState({
        treeData: newTreeData,
      });
    };
  }

expand(expanded) {
        this.setState({
            treeData: toggleExpandedForAll({              
                pagesModalIsOpen: false, 
                loModalIsOpen: false, 
                activitiesModalIsOpen : false, 
                treeData: this.state.treeData,
                expanded,
            }),
        });
    }