React js return function recursive

Question

Hello I'm trying to print data, using recursive, this is the function:

function list({ data, tab }){

    if( !data || !data.length ){
        return null;
    }        

    return data.map( item => {
      <React.Fragment>
            <div className="row" key={item.id} >
                <div className="col-md-10">
                    { tab + item.name}
                </div>
                <div className="row col-md mx-auto">
                    <Link 
                        to={`/edit/${item.id}`} 
                        className="col-md px-0" 
                        title="Edit"
                    >
                        Edit
                    </Link>   
                    <button
                        className="col-md px-0"
                        onClick={ () => delete(item.id) }
                        title="Delete"
                    >
                      Delete>                                    
                    </button>   
                </div>
            </div>
            <list data={item.child} tab={tab+"\t"} />
      </React.Fragment>
    });
}

so the struct of data is like:

[
    {
     id: '0',
     name: 'name 1'
     parent: null,
     child:[{                    
            id: '4',
            name: 'name 4'
            parent: '0',
            child:[{
                    id: '3',
                    name: 'name 3'
                    parent: '4',
                    child:[{}]  
                }]                 
           },
           {                    
            id: '2',
            name: 'name 2'
            parent: '0',
            child:[{
                    id: '5',
                    name: 'name 5'
                    parent: '2',
                    child:[{}]  
                }]                 
           },
           {                    
            id: '6',
            name: 'name 6'
            parent: '0',
            child:[{}]                 
           }                           
        ]
    }
]

you can see that the tree is completily dinamic, so I can use recursive to solve it, but I'm getting some problem, I'm showing only "name 1", and not all data, what can I do to get it???

Answer 1

How about something like this...

const rows = []
const data = [
    {
        id: '0',
        name: 'name 1',
        parent: null,
        child: [{
            id: '4',
            name: 'name 4',
            parent: '0',
            child: [{
                id: '3',
                name: 'name 3',
                parent: '4',
                child: [{}]
            }]
        },
        {
            id: '2',
            name: 'name 2',
            parent: '0',
            child: [{
                id: '5',
                name: 'name 5',
                parent: '2',
                child: [{}]
            }]
        },
        {
            id: '6',
            name: 'name 6',
            parent: '0',
            child: [{}]
        }]
    }
]

const Row = (item, tab) => {
    return (
        <div className="row" key={item.id}>
            <div className="col-md-10">
                {tab + item.name}
            </div>
            <div className="row col-md mx-auto">
                <Link 
                    to={`/edit/${item.id}`} 
                    className="col-md px-0" 
                    title="Edit"
                >
                    Edit
                </Link>
                <button
                    className="col-md px-0"
                    onClick={() => delete (item.id)}
                    title="Delete"
                >
                    Delete>
                </button>
            </div>
        </div>
    )
}

const print = (data, tab) => {
    data.forEach(item => {
        if (Object.keys(item).length === 0) {
            return
        }
        rows.push(Row(item, tab))

        if (item.child && item.child.length > 0) {
            print(item.child, tab + "\t")
        }
    })
}

print(data, '')
return rows