Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

112
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!