Change active tabs (Typescript)

March 6, 2023

I have array of tabs.

Here is the code

const navTabs: ITab[] = [
    { Name: allTab, Icon: 'gs-all', Selected: true },
    { Name: sources.corporateResources, Icon: 'gs-resources', Selected: false },
    { Name: sources.employee, Icon: 'gs-people', Selected: false },
    { Name: sources.services, Icon: 'gs-services', Selected: false },
    { Name: sources.information, Icon: 'gs-docs', Selected: false },
    { Name: sources.tableau, Icon: 'gs-tableau', Selected: false },
];

In method activate tab I change selected: true tab to false and than I find tab by name and set it to selected: true

Here is code

public activateTab(name: TabName): void {
    this.activeTab = name;
    this.navTabs.find(x => x.Selected === true).Selected = false;
    this.navTabs.find(x => x.Name === name).Selected = true;
    // console.log(navTabs);
}

Can I make somehow this in one operation?

this.navTabs.find(x => x.Selected === true).Selected = false;
this.navTabs.find(x => x.Name === name).Selected = true;

>Solution :

You could loop over them all (forEach) and then set Selected to the condition where you check the name:

const navTabs = [
  { Name: 'foo', Icon: 'gs-all', Selected: true },
  { Name: 'foo', Icon: 'gs-resources', Selected: false },
  { Name: 'foo', Icon: 'gs-people', Selected: false },
  { Name: 'bar', Icon: 'gs-services', Selected: false },
  { Name: 'foo', Icon: 'gs-docs', Selected: false },
  { Name: 'foo', Icon: 'gs-tableau', Selected: false },
];

const nameToMatch = 'bar';

navTabs.forEach(o => o.Selected = (o.Name === nameToMatch));

console.log(navTabs);