Estoy tratando de volver a enviar un árbol con la sangría adecuada usando el índice y agregándolo como un estilo.

Hace parcialmente su trabajo, ya que muestra la sangría del padre y sus subhijos pero no representa la sangría entre un hijo y un nieto.

los datos :

 items: [ { label: 'A', checked: true, items: [ { label: 'sub A-1', checked: true, items: [ { label: 'sub A-1-2', checked: true, items: [ { label: 'sub A-1-2-1', checked: true, }, ], }, ], }, { label: 'Sub A-2', checked: true, }, ], }, { label: 'B', checked: false, items: [ {label: 'B-1', checked: false}, {label: 'B-2', checked: false}, ], }, ],

el código:

 export const ReportTree = (data: ReportTreeProps) => { return ( <div> <ul> {data.items.map(node => ( <TreeNode node={node} key={node.value} /> ))} </ul> </div> ) } function TreeNode({node, index}) { return ( <li> <div className=" flex flex-row items-center gap-2 p-2"> <div className={`pl-${5 + index}`}>{node.label}</div> <input type="checkbox" name={node.label} /> </div> {node.items && ( <div> <ul> {node.items.map((child, index) => ( <TreeNode key={child.value} node={child} index={index} /> ))} </ul> </div> )} </li> ) }

Como luce :