Tengo una función que recibe valores de un json que contiene valores anidados (principal y secundarios con varias capas) y esta función configura una casilla de verificación para cada elemento, con sus hijos debajo de su respectivo padre.

Me gustaría recibir ayuda al hacer clic en una casilla de verificación principal, se seleccionarán todas las casillas de verificación secundarias, al hacer clic en una casilla de verificación secundaria y no se hace clic en los otros elementos secundarios, el elemento principal tendrá un estado "indeterminado", si solo hay un elemento secundario casilla de verificación y se hace clic o se hace clic en todos los elementos secundarios, se selecciona el elemento principal.

Puede ver la captura de pantalla de cómo debe comportarse haciendo clic aquí.

Aquí puedes ver el proyecto online.

Mi código:

Componente CheckboxItem:

 import { useState } from "react"; import Checkbox from "react-three-state-checkbox"; export function CheckboxItem(props) { const [isChecked, setIsChecked] = useState(false); function clickCheckbox() { setIsChecked(!isChecked); } return ( <> <Checkbox checked={isChecked} // indeterminate={props.indeterminate} onChange={clickCheckbox} /> {props.children} </> ); }

Componente ChildrenMap:

 import { CheckboxItem } from "../CheckboxItem"; import * as S from "./styled"; export function ChildrenMap({ itens }) { const filhos = Object.values(itens); return ( <div> {filhos.map((item, i) => ( <S.Itens key={i}> <CheckboxItem> {item.name} </CheckboxItem> <ChildrenMap itens={item.children} key={i} /> </S.Itens> ))} </div> ); }

Archivo principal:

 import React from "react"; import ReactDOM from "react-dom"; import { ChildrenMap } from "./components/ChildrenMap"; import data from "./data.json"; function App() { return ( <> {data.itens.map((item, i) => ( <div key={i}> <ChildrenMap itens={item} key={i} /> </div> ))} </> ); }