JavaScript: How to update the values of a nested array (linter throwing ‘no-param-reassign’ warning)

I have an array that looks like this:

const MENUS_LIST: MenuListing[] = [
  {
    id: 1,
    name: 'Analytics',
    defaultPath: '/analytics/sales/overview',
    relatedPath: ['/analytics/sales/overview', '/analytics/sales/bookings'],
    submenu: [
      {
        label: 'Overview',
        path: '/analytics/sales/overview',
        relatedPath: ['/analytics/sales/overview'],
        additionalIcon: [],
        name: ['Overview'],
        id: 'sales-overview',
      },
      {
        label: 'Bookings',
        path: '/analytics/sales/bookings',
        relatedPath: ['/analytics/sales/bookings'],
        additionalIcon: [],
        name: ['Bookings'],
        id: 'sales-bookings',
      },
    ],
  },
];

I need to convert it to the following format – by adding the isActive flag to the main structure and submenu when the current path === submenu.path. In the following example, we assume path to be /analytics/sales/overview.

[
  {
    id: 1,
    name: 'Analytics',
    defaultPath: '/analytics/sales/overview',
    relatedPath: ['/analytics/sales/overview', '/analytics/sales/bookings'],
    isActive: true,
    submenu: [
      {
        label: 'Overview',
        path: '/analytics/sales/overview',
        relatedPath: ['/analytics/sales/overview'],
        additionalIcon: [],
        name: ['Overview'],
        id: 'sales-overview',
        isActive: true,
      },
      {
        label: 'Bookings',
        path: '/analytics/sales/bookings',
        relatedPath: ['/analytics/sales/bookings'],
        additionalIcon: [],
        name: ['Bookings'],
        id: 'sales-bookings',
        isActive: false,
      },
    ],
  },
];

I have the following solution which works (code is simplified):

  menuX = (MENUS_LIST as MenuListingProps[]).map((m: MenuListingProps) => {
    const resultX = { ...m };
    resultX.isActive = true; // will perform checking to determine true or false
    (m.submenu as MenuItemProps[]).forEach((sm: MenuItemProps) => {
      sm.isActive = true; // linter warning; value assigned based on checking (can be true or false)
      sm.icon = 'abc'; // linter warning
      sm.title = 'xyz'; // linter warning
    });
    return resultX;
  });

But the linter is complaining of Assignment to property of function parameter "sm" on the lines where I’m assigning values to sm

Based on this SO post, I understand that I need to copy the argument to a temporary variable and work on it instead.

I did this by creating a new var resultX. But I’m not sure how to go about doing the same with sm.

Seeking some guidance, thank you.

Answer

menuX = (MENUS_LIST as MenuListingProps[]).map((m: MenuListingProps) => {
    const resultX = { ...m };
    resultX.isActive = true; // will perform checking to determine true or false
    resultX.submenu = (m.submenu as MenuItemProps[]).map((sm: MenuItemProps) => {
      const sub = {...sm};
      sub.isActive = true; // linter warning; value assigned based on checking (can be true or false)
      sub.icon = 'abc'; // linter warning
      sub.title = 'xyz'; // linter warning
      return sub;
    });
    return resultX;
  });