Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

113
Visualizações
Toggling properties using recursion | Checkbox tree

I am trying to implement a checkbox tree in react that can toggle checked property nodes according to the following rules

  1. If a parent is checked/unchecked, all the children and grandchildren will be checked/unchecked. (This has been answered here)
  2. If a node that is the only child of its parent is checked/unchecked, then the parent will also get checked/unchecked and if the parent is also the only child of super parent, then super parent will get checked/unchecked as well.

Here's the data structure that I am following:

 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,
    },
  ];

If I check the item with id 44, then the item with id 42 should get checked as well. I am doing this programmatically as I need the list of checked items in the defined hierarchy and I having a hard time with recursion.

Could someone please help me with a solution for the second point mentioned above?

For the first point, this code works good

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));
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda