JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<div class="nav-item nav-dropdown">
  <a class="nav-link" href="#">Parent</a>
  <div class="nav-dropdown-content">
    <a class="dropdown-link" href="#">link</a>
    <a class="dropdown-link" href="#">link</a>
    <a class="dropdown-link" href="#">link</a>
    <a class="dropdown-link" href="#">link</a>
  </div>
</div>

CSS

.active { background: yellow; }

JavaScript

const items = [{
    id: '1',
    name: 'item1',
    subItems: [{
      id: '1',
      name: 'subitem-1',
    }],
  },
  {
    id: '2',
    name: 'item2',
    subItems: [{
      id: '2',
      name: 'subitem-1',
      subItems: [{
        id: '7',
        name: 'subitem-1',
      }],
    }],
  }
]

function recursiveSearch(arr, id) {
  let result = []
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].id === id) {
      result.unshift(arr[i])
    }
    if (Array.isArray(arr[i].subItems)) {
       recursiveSearch(arr[i].subItems, id)
    }
  }

  return result;

}

console.log(recursiveSearch(items, '7'))