Estoy tratando de implementar un árbol de casillas de checked en reaccionar que puede alternar los nodos de propiedad marcados de acuerdo con las siguientes reglas

1. Si un padre está marcado/sin marcar, todos los hijos y nietos estarán marcados/sin marcar. (Esto ha sido respondido aquí )
2. Si un nodo que es el único hijo de su padre está marcado/desmarcado, entonces el padre también será marcado/desmarcado y si el padre también es el único hijo del superpadre, entonces el superpadre también será marcado/desmarcado.

Aquí está la estructura de datos que estoy siguiendo:

 let data = [ { field: 'ARTICLE', id: 41, name: 'Article', parentId: null, checked: false, children: [ { field: 'red', id: 43, name: 'red', parentId: 41, checked: false, }, { field: 'article.colorCode', id: 42, name: 'Color', parentId: 41, checked: false, children: [ { children: [], field: 'test', id: 44, name: 'red', parentId: 42, checked: false, }, ], }, ], }, { children: [], field: 'red', id: 45, name: 'red', parentId: 41, checked: false, }, ];

Si reviso el artículo con id 44, entonces el artículo con id 42 también debería ser revisado. Estoy haciendo esto mediante programación porque necesito la lista de elementos marcados en la jerarquía definida y tengo dificultades con la recursividad.

¿Podría alguien ayudarme con una solución para el segundo punto mencionado anteriormente?

Para el primer punto, este código funciona bien.

 let setCheckedValueForNodeAndChildren = (item, value) => { if (item.children) { return { ...item, checked: value, children: item.children.map((x) => setCheckedValueForNodeAndChildren(x, value) ), }; } else { return { ...item, checked: value }; } }; let toggleNodeInsideTree = (id, tree) => { return tree.map((x) => { if (x.id === id) { return setCheckedValueForNodeAndChildren(x, !x.checked); } if (x.children) { return { ...x, children: toggleNodeInsideTree(id, x.children) }; } return x; }); }; console.log(toggleNodeInsideTree(42, data));