createTreeList(treeData,isChild, depthLevel=0) {
        const trees = treeData.map(row=>{

            const parent = row.values.map(element=>{
                //Checks if it has children and is first element
                if (row.hasChildren & row.values.indexOf(element) === 0) {
                    //Checks if the element is an object
                    if (typeof element === 'object') {
                        return <div className="fd-tree__col fd-tree__col--control"><button className="fd-tree__control" aria-label="expand" aria-controls="inYUX852" onClick={this.updateVisibility(row.id)} aria-pressed={this.state.iStates[row.id]}></button><a href={element.linkUrl} className="fd-has-font-weight-semi">{element.displayText?element.displayText:element.linkUrl}</a></div>
                    }
                        return <div className="fd-tree__col fd-tree__col--control"><button className="fd-tree__control" aria-label="expand" aria-controls="inYUX852" onClick={this.updateVisibility(row.id)} aria-pressed={this.state.iStates[row.id]}></button>{element}</div>
                }

                if(row.values.indexOf(element) === 0){
                    return <div className="fd-tree__col fd-tree__col--control">{typeof element === 'object'?(<a href={element.linkUrl} className="fd-has-font-weight-semi">{element.displayText?element.displayText:element.linkUrl}</a>):element}</div>
                }
                    return <div className="fd-tree__col">{typeof element === 'object'?(<a href={element.linkUrl} className="fd-has-font-weight-semi">{element.displayText?element.displayText:element.linkUrl}</a>):element}</div>

            });

            let tree;

            let displayLevel= "fd-tree__group fd-tree__group--sublevel-" + depthLevel;

            if ((row.hasChildren) && (this.state.iStates[row.id])) {
                    tree = this.createTreeList(row.children, true, depthLevel + 1);
            }
            if (isChild){
                return  (<ul className={displayLevel} role="group"><ul className="fd-tree-child"><li className="fd-tree__item" role="treeitem" aria-expanded="true" key={row.id}><div className="fd-tree__row">{parent}{<Dropdown isContextual={true}>
                            
            </Dropdown>}</div>{tree}</li></ul></ul>)

            }
            depthLevel = 0;
            return (<li className="fd-tree__item" role="treeitem" aria-expanded="true" key={row.id}><div className="fd-tree__row">{parent}{<Dropdown isContextual={true}>
            
            </Dropdown>}</div>{tree}</li>)
        });
        
        return trees
    }
//Going to loop recursively through each key, until it hits the bottom(when there's no more children)
Going to loop recursively through each key, until it hits the bottom(when there's no more children)
Going to loop recursively through each key until it hits the bottom ( when there ' s no more children )
createTreeList(treeData,isChild, depthLevel=0) {
        const trees = treeData.map(row=>{
            const parent = row.values.map(element=>{
                if (row.hasChildren & row.values.indexOf(element) === 0) {
                    if (typeof element === 'object') {
                        return <div className="fd-tree__col fd-tree__col--control"><button className="fd-tree__control" aria-label="expand" aria-controls="inYUX852" onClick={this.updateVisibility(row.id)} aria-pressed={this.state.iStates[row.id]}></button><a href={element.linkUrl} className="fd-has-font-weight-semi">{element.displayText?element.displayText:element.linkUrl}</a></div>
                    }
                        return <div className="fd-tree__col fd-tree__col--control"><button className="fd-tree__control" aria-label="expand" aria-controls="inYUX852" onClick={this.updateVisibility(row.id)} aria-pressed={this.state.iStates[row.id]}></button>{element}</div>
                }
                if(row.values.indexOf(element) === 0){
                    return <div className="fd-tree__col fd-tree__col--control">{typeof element === 'object'?(<a href={element.linkUrl} className="fd-has-font-weight-semi">{element.displayText?element.displayText:element.linkUrl}</a>):element}</div>
                }
                    return <div className="fd-tree__col">{typeof element === 'object'?(<a href={element.linkUrl} className="fd-has-font-weight-semi">{element.displayText?element.displayText:element.linkUrl}</a>):element}</div>
            });
            let tree;
            let displayLevel= "fd-tree__group fd-tree__group--sublevel-" + depthLevel;
            if ((row.hasChildren) && (this.state.iStates[row.id])) {
                    tree = this.createTreeList(row.children, true, depthLevel + 1);
            }
            if (isChild){
                return  (<ul className={displayLevel} role="group"><ul className="fd-tree-child"><li className="fd-tree__item" role="treeitem" aria-expanded="true" key={row.id}><div className="fd-tree__row">{parent}{<Dropdown isContextual={true}>
            </Dropdown>}</div>{tree}</li></ul></ul>)
            }
            depthLevel = 0;
            return (<li className="fd-tree__item" role="treeitem" aria-expanded="true" key={row.id}><div className="fd-tree__row">{parent}{<Dropdown isContextual={true}>
            </Dropdown>}</div>{tree}</li>)
        });
        return trees
    }
createTreeList ( treeData , isChild , depthLevel = 0 ) { const trees = treeData . map ( row => { const parent = row . values . map ( element => { if ( row . hasChildren & row . values . indexOf ( element ) === 0 ) { if ( typeof element === 'object' ) { return < div className = "fd-tree__col fd-tree__col--control" > < button className = "fd-tree__control" aria-label = "expand" aria-controls = "inYUX852" onClick = { this . updateVisibility ( row . id ) } aria-pressed = { this . state . iStates [ row . id ] } > < / button > < a href = { element . linkUrl } className = "fd-has-font-weight-semi" > { element . displayText ? element . displayText : element . linkUrl } < / a > < / div > } return < div className = "fd-tree__col fd-tree__col--control" > < button className = "fd-tree__control" aria-label = "expand" aria-controls = "inYUX852" onClick = { this . updateVisibility ( row . id ) } aria-pressed = { this . state . iStates [ row . id ] } > < / button > { element } < / div > } if ( row . values . indexOf ( element ) === 0 ) { return < div className = "fd-tree__col fd-tree__col--control" > { typeof element === 'object' ? ( < a href = { element . linkUrl } className = "fd-has-font-weight-semi" > { element . displayText ? element . displayText : element . linkUrl } < / a > ) : element } < / div > } return < div className = "fd-tree__col" > { typeof element === 'object' ? ( < a href = { element . linkUrl } className = "fd-has-font-weight-semi" > { element . displayText ? element . displayText : element . linkUrl } < / a > ) : element } < / div > } ) ; let tree ; let displayLevel = "fd-tree__group fd-tree__group--sublevel-" + depthLevel ; if ( ( row . hasChildren ) && ( this . state . iStates [ row . id ] ) ) { tree = this . createTreeList ( row . children , true , depthLevel + 1 ) ; } if ( isChild ) { return ( < ul className = { displayLevel } role = "group" > < ul className = "fd-tree-child" > < li className = "fd-tree__item" role = "treeitem" aria-expanded = "true" key = { row . id } > < div className = "fd-tree__row" > { parent } { < Dropdown isContextual = { true } > < / Dropdown > } < / div > { tree } < / li > < / ul > < / ul > ) } depthLevel = 0 ; return ( < li className = "fd-tree__item" role = "treeitem" aria-expanded = "true" key = { row . id } > < div className = "fd-tree__row" > { parent } { < Dropdown isContextual = { true } > < / Dropdown > } < / div > { tree } < / li > ) } ) ; return trees }
Going to loop recursively through each key, until it hits the bottom(when there's no more children)
Going to loop recursively through each key until it hits the bottom ( when there ' s no more children )
//Checks if it has children and is first element //Checks if the element is an object