[{
    descp: 'UNE',
    url: '/tree/une',
    icon: 'icon-list',
    children: [
        {
            descp: 'ATI',
            url: '/tree/une/ati',
            icon: 'icon-layers',
            children: [{
                    descp: 'ATI-VC',
                    url: '/tree/une/ati/ativc',
                    icon: 'icon-pin',
                    children: []
                },
                {
                    descp: 'ATI-CMG',
                    url: '/tree/une/ati/aticmg',
                    icon: 'icon-pin',
                    children: []
                }
            ]
        },
        {
            descp: 'EMGEF',
            url: '/tree/une/emgef',
            icon: 'icon-layers',
            children: []
        },
        {
            descp: 'ECIE',
            url: '/tree/une/ecie',
            icon: 'icon-layers',
            children: []
        },
        {
            descp: 'GEYSEL',
            url: '/tree/une/geysel',
            icon: 'icon-layers',
            children: []
        }
    ]
}]

const MyTree = (props) => {
    const { list } = props;
    return (
        list.map((child,i)=>
            <MyTreeNestedItems key={i} data={child} />
        )
    );
};


const MyTreeNestedItems = (props) => {
    const { data } = props;

    const createChildren = (list) => {
        return (
            list.map((child,i)=>
                <MyTreeNestedItems key={i} data={child} />
            )
        )
    }

    let children = null;
    if (data.children.length) {
        children = createChildren(data.children);
    }

    return (
        <li className="nav-item">
            <a className="nav-link" href="#">
                <span className={data.icon}></span> {" "}
                { data.descp }
            </a>
            <ul style={{listStyleType:"none"}}>{children}</ul>
        </li>
    );
};

render(<MyTree list={tree} />,document.querySelector('.js-mytree'));