JavaScript: Best way for update all tree items?-CodePudding

I try to create sidebar component in React and I have a data structure like bellow

const links = [
  {
    label: 'Item-1',
    url: '/item-1',
  },
  {
    label: 'Item-2',
    children: [
      {
        label: 'Item-2-1',
        url: '/item-2-1',
      },
      {
        label: 'Item-2-2',
        url: '/item-2-2',
      },
      {
        label: 'Item-2-3',
        url: '/item-2-3',
      },
    ],
  },
  {
    label: 'Item-3',
    children: [
      {
        label: 'Item-3-1',
        url: '/item-3-1',
      },
      {
        label: 'Item-3-2',
        url: '/item-3-2',
      },
    ],
  },
];

So the problem is let's say the user changed URL and URL something like that http://localhost:90/item-2-3.

And I need to activate this sidebar item from the sidebar and it can be nested. So firstly I need to deactivate all other sidebar items (I don't want multiple selected items in the sidebar) and after that activate the selected sidebar item.

Because that (if I'm correct) I need update all tree items let's say I add active:false field to all JSON and after that I need to find the correct tree item from tree (URL === item-2-3) add active:true and also update all parent json to active:true (for there are look selected/opened)

So my question is am I correct if I correct how can write this code optimal way? :/

Actually, I want to create a function and when calling this function like that selectItemFromTree(links, '/item-2-2') I get results like in bellow.

   const links = [
  {
    label: 'Item-1',
    url: '/item-1',
    active: false
  },
  {
    label: 'Item-2',
    active: true,
    children: [
      {
        label: 'Item-2-1',
        url: '/item-2-1',
        active: false
      },
      {
        label: 'Item-2-2',
        url: '/item-2-2',
        active: true,
      },
      {
        label: 'Item-2-3',
        url: '/item-2-3',
        active: false
      },
    ],
  },
  {
    label: 'Item-3',
    active: false,
    children: [
      {
        label: 'Item-3-1',
        url: '/item-3-1',
        active: false
      },
      {
        label: 'Item-3-2',
        url: '/item-3-2',
        active: false
      },
    ],
  },
];

CodePudding user response：

You have to traverse the tree recursively and update all the active statuses.

const links=[{label:"Item-1",url:"/item-1"},{label:"Item-2",children:[{label:"Item-2-1",url:"/item-2-1"},{label:"Item-2-2",url:"/item-2-2"},{label:"Item-2-3",url:"/item-2-3"}]},{label:"Item-3",children:[{label:"Item-3-1",url:"/item-3-1"},{label:"Item-3-2",url:"/item-3-2"}]}];


const updateActiveLink = (links, url, parent = null) => {
   for (link of links) {
      link.active = false;
      if (link?.children) {
          updateActiveLink(link.children, url, link)
      }
      if (link.url === url) {
          link.active = true;
          if (!!parent) parent.active = true;
      }
   }
}

updateActiveLink(links, '/item-2-3');
          
console.log(links);

.as-console-wrapper {min-height: 100%!important; top: 0}

Note that this method will mutate the links array.